ShareSheet 分享面板

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/share-sheet

分享面板是从底部弹起来的一个层, 风格与 ActionSheet 类似, 但内容按照分享的样式进行定义, 需要自行配置的分享的项, 文字文案, 以及图标. 利用 onSelect 事件来获得点击分享的项,来进行后续分享的逻辑处理.

基本用法:

  1. 定义分享的数据源 (options), 必要属性有: name (显示的名字), icon (显示的图标). 如何需要多行展示, 就设置为多为数组.
  2. 绑定 v-model:show 控制组件的显示.
  3. 设置 title 属性
  4. 定义 select 事件, 点击分享后会触发事件, 事件参数, 或所绑定的数据源可以获得所点击的项.
  5. 在 select 事件中将 v-model:show 中绑定的值设置为 false.
<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>

const showShare = ref(false)
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
]
const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
}

其中 Options 的数据结构

属性说明
name显示在页面中的名字, 描述为渠道名称
description描述文字, 显示在渠道名下方的描述文字, 略小灰色.
icon显示的图标. 可选值为 wechat, weibo, qq, link, qrcode, poster, weapp-qrcode, wechat-moments, 支持图片 url.
className类样式名.
Last Updated:
Contributors: jk