ShareSheet 分享面板

介绍

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

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-share-sheet": "@vant/weapp/share-sheet/index"
  3. }

代码演示

基础用法

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

  1. <van-cell title="显示分享面板" bind:click="onClick" />
  2. <van-share-sheet
  3. show="{{ showShare }}"
  4. title="立即分享给好友"
  5. options="{{ options }}"
  6. bind:select="onSelect"
  7. bind:close="onClose"
  8. />
  1. Page({
  2. data: {
  3. showShare: false,
  4. options: [
  5. { name: '微信', icon: 'wechat', openType: 'share' },
  6. { name: '微博', icon: 'weibo' },
  7. { name: '复制链接', icon: 'link' },
  8. { name: '分享海报', icon: 'poster' },
  9. { name: '二维码', icon: 'qrcode' },
  10. ],
  11. },
  12. onClick(event) {
  13. this.setData({ showShare: true });
  14. },
  15. onClose() {
  16. this.setData({ showShare: false });
  17. },
  18. onSelect(event) {
  19. Toast(event.detail.name);
  20. this.onClose();
  21. },
  22. });

展示多行选项

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

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

自定义图标

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

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

展示描述信息

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

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

API

Props

参数说明类型默认值
show是否显示分享面板booleanfalse
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string‘取消’
description标题下方的辅助描述文字string-
duration动画时长,单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

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

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标,可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments,支持传入图片 URLstring
openType按钮 open-type,可用于实现分享功能,可选值为 sharestring

Events

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

Slots

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

ShareSheet 分享面板 - 图1