zebra-ui基于uniapp,跨多端组件库
  • 2.x
  • 中文
开发指南
介绍
快速上手
进阶用法
常见问题
更新日志
贡献指南
国际化
基础组件
Button 按钮
Cell 单元格
ConfigProvider 全局配置
Icon 图标
Image 图片
Layout 布局
Popup 弹出层
Style 内置样式
Transition 动画
Toast 轻提示
表单组件
Area 省市区选择
Calendar 日历
Cascader 级联选择
Checkbox 复选框
DatePicker 日期选择
Field 输入框
Form 表单
NumberKeyboard 数字键盘
PasswordInput 密码输入框
Picker 选择器
PickerGroup 选择器组
Radio 单选框
Rate 评分
Search 搜索
Slider 滑块
Signature 签名
Stepper 步进器
Switch 开关
TimePicker 时间选择
Uploader 文件上传
反馈组件
ActionSheet 动作面板
Barrage 弹幕
Dialog 弹出框
DropdownMenu 下拉菜单
FloatingPanel 浮动面板
FloatingBubble 浮动气泡
Loading 加载
Notify 消息通知
Overlay 遮罩层
PullRefresh 下拉刷新
ShareSheet 分享面板
SwipeCell 滑动单元格
展示组件
Badge 徽标
Circle 环形进度条
Collapse 折叠面板
CountDown 倒计时
Divider 分割线
Empty 空状态
Highlight 高亮文本
List 列表
NoticeBar 通知栏
Popover 气泡弹出框
Progress 进度条
RollingText 翻滚文本
Skeleton 骨架屏
Steps 步骤条
Sticky 粘性布局
Swipe 轮播
Tag 标签
TextEllipsis 文本省略
Watermark 水印
导航组件
Grid 宫格
NavBar 导航栏
Sidebar 侧边导航
Tab 标签页
Tabbar 标签栏
TreeSelect 分类选择

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' }
])

API

Props

参数说明类型默认值
v-model:show是否显示分享面板booleanfalse
options分享选项Option[]
title顶部标题string-
cancel-text取消按钮文字,传入空字符串可以隐藏按钮string'取消'
description标题下方的辅助描述文字string-
duration动画时长,单位毫秒,设置为 0 可以禁用动画number | string300
z-index将面板的 z-index 层级设置为一个固定值number | string2000+
round是否显示圆角booleantrue
overlay是否显示遮罩层booleantrue
overlay-class自定义遮罩层类名string | Array | object-
overlay-style自定义遮罩层样式object-
lock-scroll是否锁定背景滚动booleantrue
close-on-popstate是否在页面回退时自动关闭booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue
before-close关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise(action: string) => boolean | Promise<boolean>-

Option 数据结构

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

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标,可选值为 wechat weibo qq link qrcode poster weapp-qrcode wechat-moments,支持传入图片 URLstring
className分享选项类名string

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
cancel点击取消按钮时触发-
open打开面板时触发-
close关闭面板时触发-
opened打开面板且动画结束后触发-
closed关闭面板且动画结束后触发-
click-overlay点击遮罩层时触发event: MouseEvent

Slots

名称说明
title自定义顶部标题
description自定义描述文字
cancel自定义取消按钮内容

主题定制

样式变量

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

名称默认值描述
--z-share-sheet-header-paddingvar(--z-padding-sm) var(--z-padding-md) var(--z-padding-base)-
--z-share-sheet-title-colorvar(--z-text-color)-
--z-share-sheet-title-font-sizevar(--z-font-size-md)-
--z-share-sheet-title-line-heightvar(--z-line-height-md)-
--z-share-sheet-description-colorvar(--z-text-color-2)-
--z-share-sheet-description-font-sizevar(--z-font-size-sm)-
--z-share-sheet-description-line-height32rpx-
--z-share-sheet-icon-size96rpx-
--z-share-sheet-option-name-colorvar(--z-gray-7)-
--z-share-sheet-option-name-font-sizevar(--z-font-size-sm)-
--z-share-sheet-option-description-colorvar(--z-text-color-3)-
--z-share-sheet-option-description-font-sizevar(--z-font-size-sm)-
--z-share-sheet-cancel-button-font-sizevar(--z-font-size-lg)-
--z-share-sheet-cancel-button-height96rpx-
--z-share-sheet-cancel-button-backgroundvar(--z-background-2)-