Vant ShareSheet 面板是从弹起的面板，用于展示各渠道对应的操作按钮，不含具体的逻辑。2.6 版本开始此组件。

import Vue from 'vue';
import { ShareSheet } from 'vant';

Vue.use(ShareSheet);

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

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

import { Toast } from 'vant';

export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制', icon: 'link' },
        { name: '海报', icon: 'poster' },
        { name: '', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};

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

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

export default {
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制', icon: 'link' },
          { name: '海报', icon: 'poster' },
          { name: '', icon: 'qrcode' },
        ],
      ],
    };
  },
};

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

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

export default {
  data() {
    return {
      showShare: false,
      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',
        },
      ],
    };
  },
};

通过 description 可以设置下方的描述, 在 options 内设置 description 可以选项描述。

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

export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制', icon: 'link', description: '描述信息' },
        { name: '海报', icon: 'poster' },
        { name: '', icon: 'qrcode' },
      ],
    };
  },
};

API

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

常见问题

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

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

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

可以通过  组件以弹层的形式展示，然后引导保存进行。

演示