ShareSheet 分享面板

引入

在或index.json中引入组件，详细介绍见。

基础用法

  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: 'qrcode' },
  9.     ],
  10.   },
  12.   onClick(event) {
  13.     this.setData({ showShare: true });
  14.   },
  16.   onClose() {
  17.     this.setData({ showShare: false });
  18.   },
  20.   onSelect(event) {
  22.     this.onClose();
  23.   },
  24. });

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

  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: 'poster' },
  12.         { name: '二维码', icon: 'qrcode' },
  13.       ],
  14.     ],
  15.   },
  16. });

自定义图标

  1. <van-share-sheet show="{{ showShare }}" options="{{ options }}" />

展示描述信息

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

  1. <van-share-sheet
  2.   show="{{ showShare }}"
  3.   options="{{ options }}"
  4.   title="立即分享给好友"
  5.   description="描述信息"
  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. });

API

Option 数据结构

Events