ShareSheet 分享面板

介绍

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

基础用法

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

<z-cell is-link title="显示分享面板" @click="showBasic = true" />
<z-share-sheet
  v-model:show="showBasic"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const showBasic = ref(false)
const options = computed(() => [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' }
])
const onSelect = (option: any) => {
  toast.showToast(option.name)
  showBasic.value = false
}

展示多行选项

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

<z-share-sheet
  v-model:show="showMultiLine"
  title="立即分享给好友"
  :options="multiLineOptions"
  @select="onSelect"
/>

const multiLineOptions = computed(() => [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' }
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
    { name: '小程序码', icon: 'weapp-qrcode' }
  ]
])

自定义图标

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

<z-share-sheet
  v-model:show="showCustomIcon"
  :options="customIconOptions"
  @select="onSelect"
/>

const customIconOptions = computed(() => [
  {
    name: '名称',
    icon: 'https://cdn.zebraui.com/zebra-ui/images/assets/demo-select.png'
  },
  {
    name: '名称',
    icon: 'zhihu'
  },
  {
    name: '名称',
    icon: 'linkedin'
  },
  { name: '名称', icon: 'facebook' }
])

展示描述信息

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

<z-share-sheet
  v-model:show="showWithDesc"
  title="立即分享给好友"
  :options="optionsWithDesc"
  description="描述信息"
  @select="onSelect"
/>

const optionsWithDesc = computed(() => [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  {
    name: '复制链接',
    icon: 'link',
    description: '描述信息'
  },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' }
])

Props

Option 数据结构

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

Events

Slots

样式变量

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