Press UI

# ShareSheet 分享面板

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

# 引入

import PressShareSheet from 'press-ui/press-share-sheet/press-share-sheet';

export default {
  components: {
    PressShareSheet,
  }
}

# 代码演示

# 基础用法

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

<press-cell title="显示分享面板" @click="onClick" />
<press-share-sheet
  :show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
  @close="onClose"
/>

export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat', openType: 'share' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    }
  },
  methods: {
    onClick(event) {
      this.setData({ showShare: true });
    },

    onClose() {
      this.setData({ showShare: false });
    },

    onSelect(event) {
      Toast(event.detail.name);
      this.onClose();
    },
  },
};

# 展示多行选项

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

<press-share-sheet
  :show="showShare"
  title="立即分享给好友"
  :options="options"
/>

export default {
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
        ],
      ],
    }
  },
});

# 自定义图标

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

<press-share-sheet :show="showShare" :options="options" />

export default {
  data() {
    return {
      showShare: false,
      options: [
        {
          name: '名称',
          icon: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fcustom-icon-fire.png',
        },
        {
          name: '名称',
          icon: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fcustom-icon-light.png',
        },
        {
          name: '名称',
          icon: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fcustom-icon-water.png',
        },
      ],
    }
  },
};

# 展示描述信息

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

<press-share-sheet
  :show="showShare"
  :options="options"
  title="立即分享给好友"
  description="描述信息"
/>

export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        {
          name: '复制链接',
          icon: 'link',
          description: '描述信息',
        },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
    }
  },
};

# API

# Props

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

# Option 数据结构

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

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

# Events

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

# Slots

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

# 在线调试

横屏

← SwipeCell →