介紹

底部彈起的分享面板，用于展示各分享渠道對應的操作按鈕，不含具體的分享邏輯。2.6 版本開始支持此組件。

引入

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

Vue.use(ShareSheet);

基礎用法

分享面板通過 options 屬性來定義分享選項，數(shù)組的每一項是一個對象，對象格式見文檔下方表格。

<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;
    },
  },
};

展示多行選項

當分享選項的數(shù)量較多時，可以將 options 定義為數(shù)組嵌套的格式，每個子數(shù)組會作為一行選項展示。

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

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

自定義圖標

除了使用內置的幾種圖標外，可以直接在 icon 中傳入圖片 URL 來使用自定義的圖標。

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

export default {
  data() {
    return {
      showShare: false,
      options: [
        {
          name: '名稱',
          icon: 'https://img01.yzcdn.cn/vant/custom-icon-fire.png',
        },
        {
          name: '名稱',
          icon: 'https://img01.yzcdn.cn/vant/custom-icon-light.png',
        },
        {
          name: '名稱',
          icon: 'https://img01.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' },
      ],
    };
  },
};

Props

Option 數(shù)據(jù)結構

options屬性為一個對象數(shù)組，數(shù)組中的每個對象配置一列，對象可以包含以下值：

Events

Slots

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。

如何實現(xiàn)分享邏輯？

在不同的 App 或瀏覽器中，存在各式各樣的分享接口或分享方式，因此 ShareSheet 組件不提供具體的分享邏輯，需要開發(fā)者根據(jù)業(yè)務場景自行實現(xiàn)。

微信內分享

由于微信未提供分享相關的 API，需要引導用戶點擊右上角進行分享。

App 內分享

可以通過 JSBridge 調用原生應用的 SDK 進行分享。

分享海報或二維碼

可以通過 Popup 組件以彈層的形式展示圖片，然后引導用戶保存圖片進行分享。