ShareSheet 分享面板

介绍

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

引入

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

  1. import { createApp } from 'vue';
  2. import { ShareSheet } from 'vant';
  3. const app = createApp();
  4. app.use(ShareSheet);

代码演示

基础用法

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

  1. <van-cell title="显示分享面板" @click="showShare = true" />
  2. <van-share-sheet
  3. v-model:show="showShare"
  4. title="立即分享给好友"
  5. :options="options"
  6. @select="onSelect"
  7. />
  1. import { ref } from 'vue';
  2. import { showToast } from 'vant';
  3. export default {
  4. setup() {
  5. const showShare = ref(false);
  6. const options = [
  7. { name: '微信', icon: 'wechat' },
  8. { name: '微博', icon: 'weibo' },
  9. { name: '复制链接', icon: 'link' },
  10. { name: '分享海报', icon: 'poster' },
  11. { name: '二维码', icon: 'qrcode' },
  12. ];
  13. const onSelect = (option) => {
  14. showToast(option.name);
  15. showShare.value = false;
  16. };
  17. return {
  18. options,
  19. onSelect,
  20. showShare,
  21. };
  22. },
  23. };

展示多行选项

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

  1. <van-share-sheet
  2. v-model:show="showShare"
  3. title="立即分享给好友"
  4. :options="options"
  5. />
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const showShare = ref(false);
  5. const options = [
  6. [
  7. { name: '微信', icon: 'wechat' },
  8. { name: '朋友圈', icon: 'wechat-moments' },
  9. { name: '微博', icon: 'weibo' },
  10. { name: 'QQ', icon: 'qq' },
  11. ],
  12. [
  13. { name: '复制链接', icon: 'link' },
  14. { name: '分享海报', icon: 'poster' },
  15. { name: '二维码', icon: 'qrcode' },
  16. { name: '小程序码', icon: 'weapp-qrcode' },
  17. ],
  18. ];
  19. return {
  20. options,
  21. showShare,
  22. };
  23. },
  24. };

自定义图标

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

  1. <van-share-sheet v-model:show="showShare" :options="options" />
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const showShare = ref(false);
  5. const options = [
  6. {
  7. name: '名称',
  8. icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',
  9. },
  10. {
  11. name: '名称',
  12. icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',
  13. },
  14. {
  15. name: '名称',
  16. icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',
  17. },
  18. ];
  19. return {
  20. options,
  21. showShare,
  22. };
  23. },
  24. };

展示描述信息

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

  1. <van-share-sheet
  2. v-model:show="showShare"
  3. :options="options"
  4. title="立即分享给好友"
  5. description="描述信息"
  6. />
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const showShare = ref(false);
  5. const options = [
  6. { name: '微信', icon: 'wechat' },
  7. { name: '微博', icon: 'weibo' },
  8. { name: '复制链接', icon: 'link', description: '描述信息' },
  9. { name: '分享海报', icon: 'poster' },
  10. { name: '二维码', icon: 'qrcode' },
  11. ];
  12. return {
  13. options,
  14. showShare,
  15. };
  16. },
  17. };

API

Props

参数说明类型默认值
v-model:show是否显示分享面板booleanfalse
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字,传入空字符串可以隐藏按钮string‘取消’
description标题下方的辅助描述文字string-
duration动画时长,单位秒,设置为 0 可以禁用动画number | string0.3
z-index将面板的 z-index 层级设置为一个固定值number | string2000+
round v3.2.6是否显示圆角booleantrue
overlay是否显示遮罩层booleantrue
overlay-class自定义遮罩层类名string | Array | object-
overlay-style自定义遮罩层样式object-
lock-scroll是否锁定背景滚动booleantrue
lazy-render是否在显示弹层时才渲染内容booleantrue
close-on-popstate是否在页面回退时自动关闭booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue
teleport指定挂载的节点,等同于 Teleport 组件的 to 属性string | Element-
before-close v3.1.4关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise(action: string) => boolean | Promise<boolean>-

Option 数据结构

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

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标,可选值为 wechat weibo qq link qrcode poster weapp-qrcode wechat-moments,支持传入图片 URLstring
className分享选项类名string

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
cancel点击取消按钮时触发-
open打开面板时触发-
close关闭面板时触发-
opened打开面板且动画结束后触发-
closed关闭面板且动画结束后触发-
click-overlay点击遮罩层时触发event: MouseEvent

Slots

名称说明
title自定义顶部标题
description自定义描述文字
cancel v3.0.10自定义取消按钮内容

类型定义

组件导出以下类型定义:

  1. import type {
  2. ShareSheetProps,
  3. ShareSheetOption,
  4. ShareSheetOptions,
  5. } from 'vant';

主题定制

样式变量

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

名称默认值描述
—van-share-sheet-header-paddingvar(—van-padding-sm) var(—van-padding-md) var(—van-padding-base)-
—van-share-sheet-title-colorvar(—van-text-color)-
—van-share-sheet-title-font-sizevar(—van-font-size-md)-
—van-share-sheet-title-line-heightvar(—van-line-height-md)-
—van-share-sheet-description-colorvar(—van-text-color-2)-
—van-share-sheet-description-font-sizevar(—van-font-size-sm)-
—van-share-sheet-description-line-height16px-
—van-share-sheet-icon-size48px-
—van-share-sheet-option-name-colorvar(—van-gray-7)-
—van-share-sheet-option-name-font-sizevar(—van-font-size-sm)-
—van-share-sheet-option-description-colorvar(—van-text-color-3)-
—van-share-sheet-option-description-font-sizevar(—van-font-size-sm)-
—van-share-sheet-cancel-button-font-sizevar(—van-font-size-lg)-
—van-share-sheet-cancel-button-height48px-
—van-share-sheet-cancel-button-backgroundvar(—van-background-2)-

常见问题

如何实现分享逻辑?

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

微信内分享

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

App 内分享

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

分享海报或二维码

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

ShareSheet 分享面板 - 图1