ShareSheet 分享面板

介绍

底部弹起的分享面板,用于展示各分享渠道对应的操作按钮,不含具体的分享逻辑。2.6 版本开始支持此组件。

引入

  1. import Vue from 'vue';
  2. import { ShareSheet } from 'vant';
  3. Vue.use(ShareSheet);

代码演示

基础用法

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

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

展示多行选项

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

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

自定义图标

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

  1. <van-share-sheet v-model="showShare" :options="options" />
  1. export default {
  2. data() {
  3. return {
  4. showShare: false,
  5. options: [
  6. {
  7. name: '名称',
  8. icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
  9. },
  10. {
  11. name: '名称',
  12. icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
  13. },
  14. {
  15. name: '名称',
  16. icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
  17. },
  18. ],
  19. };
  20. },
  21. };

展示描述信息

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

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

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字,传入空字符串可以隐藏按钮string‘取消’
description标题下方的辅助描述文字string-
duration动画时长,单位秒number | string0.3
overlay是否显示遮罩层booleantrue
lock-scroll是否锁定背景滚动booleantrue
lazy-render是否在显示弹层时才渲染内容booleantrue
close-on-popstate是否在页面回退时自动关闭booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue
get-container指定挂载的节点,用法示例string | () => Element-

Option 数据结构

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

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

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
cancel点击取消按钮时触发-
click-overlay v2.9.1点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字

样式变量

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

名称默认值描述
@share-sheet-header-padding@padding-sm @padding-md @padding-base-
@share-sheet-title-color@text-color-
@share-sheet-title-font-size@font-size-md-
@share-sheet-title-line-height@line-height-md-
@share-sheet-description-color@gray-6-
@share-sheet-description-font-size@font-size-sm-
@share-sheet-description-line-height16px-
@share-sheet-icon-size48px-
@share-sheet-option-name-color@gray-7-
@share-sheet-option-name-font-size@font-size-sm-
@share-sheet-option-description-color@gray-5-
@share-sheet-option-description-font-size@font-size-sm-
@share-sheet-cancel-button-font-size@font-size-lg-
@share-sheet-cancel-button-height48px-
@share-sheet-cancel-button-background@white-

常见问题

如何实现分享逻辑?

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

微信内分享

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

App 内分享

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

分享海报或二维码

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

ShareSheet 分享面板 - 图1