Vant4 ShareSheet 分享面板

介紹

底部彈起的分享面板，用于展示各分享渠道對(duì)應(yīng)的操作按鈕，不含具體的分享邏輯。

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

代碼演示

基礎(chǔ)用法

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

<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: '復(fù)制鏈接', icon: 'link' },
      { name: '分享海報(bào)', icon: 'poster' },
      { name: '二維碼', icon: 'qrcode' },
    ];

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

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

展示多行選項(xiàng)

當(dāng)分享選項(xiàng)的數(shù)量較多時(shí)，可以將 ?options? 定義為數(shù)組嵌套的格式，每個(gè)子數(shù)組會(huì)作為一行選項(xiàng)展示。

<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: '復(fù)制鏈接', icon: 'link' },
        { name: '分享海報(bào)', icon: 'poster' },
        { name: '二維碼', icon: 'qrcode' },
        { name: '小程序碼', icon: 'weapp-qrcode' },
      ],
    ];

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

自定義圖標(biāo)

除了使用內(nèi)置的幾種圖標(biāo)外，可以直接在 ?icon? 中傳入圖片 URL 來使用自定義的圖標(biāo)。

<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? 屬性可以設(shè)置標(biāo)題下方的描述文字, 在 ?options? 內(nèi)設(shè)置 ?description? 屬性可以添加分享選項(xiàng)描述。

<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: '復(fù)制鏈接', icon: 'link', description: '描述信息' },
      { name: '分享海報(bào)', icon: 'poster' },
      { name: '二維碼', icon: 'qrcode' },
    ];

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

API

Props

Option 數(shù)據(jù)結(jié)構(gòu)

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

Events

Slots

類型定義

組件導(dǎo)出以下類型定義：

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

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。

常見問題

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

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

微信內(nèi)分享

由于微信未提供分享相關(guān)的 API，需要引導(dǎo)用戶點(diǎn)擊右上角進(jìn)行分享。

App 內(nèi)分享

可以通過 JSBridge 調(diào)用原生應(yīng)用的 SDK 進(jìn)行分享。

分享海報(bào)或二維碼

可以通過 Popup 組件以彈層的形式展示圖片，然后引導(dǎo)用戶保存圖片進(jìn)行分享。