vant分页组件 Vant4 ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from "vue";
import { ShareSheet } from "vant";

const app = createApp();
app.use(ShareSheet);

代码演示

基础用法

分享面板通过 ​options​ 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" @click="showShare = true" />
<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>

import { ref } from "vue";
import { showToast } from "vant";

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];

    const onSelect = (option) => {
      showToast(option.name);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
};

展示多行选项

当分享选项的数量较多时，可以将 ​options​ 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
/>

import { ref } from "vue";

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];

    return {
      options,
      showShare,
    };
  },
};

自定义图标

除了使用内置的几种图标外，可以直接在 ​icon​ 中传入图片 URL 来使用自定义的图标。

<van-share-sheet v-model:show="showShare" :options="options" />

import { ref } from "vue";

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      {
        name: "名称",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png",
      },
      {
        name: "名称",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png",
      },
      {
        name: "名称",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png",
      },
    ];

    return {
      options,
      showShare,
    };
  },
};

展示描述信息

通过 ​description​ 属性可以设置标题下方的描述文字, 在 ​options​ 内设置 ​description​ 属性可以添加分享选项描述。

<van-share-sheet
  v-model:show="showShare"
  :options="options"
  title="立即分享给好友"
  description="描述信息"
/>

import { ref } from "vue";

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link", description: "描述信息" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];

    return {
      options,
      showShare,
    };
  },
};

API

Props

Option 数据结构

​options​ 属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

Events

Slots

类型定义

组件导出以下类型定义：

import type {
  ShareSheetProps,
  ShareSheetOption,
  ShareSheetOptions,
} from "vant";

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

常见问题

如何实现分享逻辑？

在不同的 App 或浏览器中，存在各式各样的分享接口或分享方式，因此 ShareSheet 组件不提供具体的分享逻辑，需要开发者根据业务场景自行实现。

微信内分享

由于微信未提供分享相关的 API，需要引导用户点击右上角进行分享。

App 内分享

可以通过 JSBridge 调用原生应用的 SDK 进行分享。

分享海报或二维码

可以通过 Popup 组件以弹层的形式展示图片，然后引导用户保存图片进行分享。