Vant3 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 { Toast } 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) => {
      Toast(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://img.yzcdn.cn/vant/custom-icon-fire.png,
      },
      {
        name: 名称,
        icon: https://img.yzcdn.cn/vant/custom-icon-light.png,
      },
      {
        name: 名称,
        icon: https://img.yzcdn.cn/vant/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

样式变量

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

常见问题

如何实现分享逻辑？

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

微信内分享

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

App 内分享

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

分享海报或二维码

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