Skip to content

ShareSheet 分享面板 ​

在底部显示分享操作列表;具体分享行为由页面及平台开放能力处理。

支持平台 ​

以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。

App-vueApp-nvue微信小程序支付宝小程序百度小程序字节小程序QQ小程序H5PC快手小程序钉钉小程序
✓✓✓✓✓✓✓✓✓✓✓

基础用法 ​

vue
<!-- 分享选项 -->
<fui-share-sheet :show="showShare" :itemList="shareItems"
  @click="handleShare" @cancel="showShare = false" />

页面需声明 showShare、shareItems 和 handleShare。

属性 ​

属性类型说明官网默认值
showBoolean是否显示false
itemListArray分享按钮数据[]
widthNumber / String按钮宽高,单位 rpx108
itemBackgroundString按钮默认背景色,单项配置优先transparent
radiusBoolean是否显示圆角true
backgroundString面板背景色#EAEAEA
titleString标题分享到
sizeNumber / String标题字号,单位 rpx24
colorString标题颜色#7f7f7f
btnTextString取消按钮文字取消
btnSizeNumber / String取消按钮字号,单位 rpx32
btnColorString取消按钮文字颜色#181818
btnBackgroundString取消按钮背景色transparent
lineColorString取消按钮上边框色#ddd
maskBackgroundString遮罩颜色rgba(0,0,0,.6)
maskClosableBoolean点击遮罩是否触发 cancelfalse
zIndexNumber / String层级,nvue 不支持1001
isFullBoolean内容不足以滚动时是否两端对齐false
paddingNumber / String列表左右内边距,单位 rpx20
safeAreaBoolean是否适配底部安全区true

事件 ​

事件说明回调参数
click点击分享按钮index、item;双层数组还返回 subIndex
cancel点击取消按钮或可关闭的遮罩{}
opensetting关闭授权设置页平台授权设置信息
launchapp从小程序打开 App 成功平台事件

父组件需根据事件更新 show。

插槽 ​

插槽说明
default替换分享面板的标题