ShareSheet 分享面板 
概述
ShareSheet 分享面板，主要用于分享或相关操作使用。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。
一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiShareSheet from "@/components/firstui/fui-share-sheet/fui-share-sheet.vue"
export default {
components:{
fuiShareSheet
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
内容两端对齐
通过 isFull 属性设置内容是否两端对齐（仅内容较少不足以滚动时使用），padding 属性设置分享按钮列表左右的内边距，background 属性设置分享面板背景色，lineColor 属性设置取消按钮上边框颜色，show 属性控制分享面板的显示隐藏，itemList 属性设置分享按钮数据，maskClosable 属性设置点击遮罩是否可关闭分享面板。
<fui-share-sheet isFull padding="48" background="#fff" lineColor="#eee" :show="visible" :itemList="items" maskClosable @cancel="cancel" @click="onTap"></fui-share-sheet>
1
data() {
return {
visible: false,
items: [{
name: 'wechat',
color: '#07c160',
text: '微信好友',
//v1.9.9+
openType: 'share'
}, {
name: 'moments',
color: '#44DC6B',
text: '朋友圈'
}, {
name: 'qq',
color: '#3FB7F5',
text: 'QQ'
}, {
name: 'sina',
color: '#D8070B',
text: '新浪微博'
}]
}
},
methods: {
onTap(e) {
console.log(e)
this.fui.toast(e.item.text)
this.visible = false
},
cancel() {
this.visible = false
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
展示多行
通过 show 属性控制分享面板的显示隐藏，itemList 属性设置分享按钮数据，itemBackground 属性设置分享按钮背景色（优先使用 itemList 中背景色）。
<fui-share-sheet :show="show" :itemList="itemList" itemBackground="#fff" @click="onClick" @cancel="cancel"></fui-share-sheet>
1
data() {
return {
show: false,
itemList: [
[{
name: 'wechat',
size: 72,
color: '#07c160',
text: '微信好友',
//v1.9.9+
openType: 'share'
}, {
name: 'moments',
size: 72,
color: '#44DC6B',
text: '朋友圈'
}, {
name: 'qq',
size: 72,
color: '#3FB7F5',
text: 'QQ'
}, {
name: 'sina',
size: 72,
color: '#D8070B',
text: '新浪微博'
}, {
name: 'browser',
size: 72,
color: '#465CFF',
text: '浏览器打开'
}, {
name: 'community-fill',
size: 72,
color: '#FFB703',
text: '社区'
}],
[{
name: 'picture',
size: 56,
text: '分享海报'
}, {
name: 'link',
size: 56,
text: '复制链接'
}, {
name: 'search',
size: 56,
text: '搜索'
}, {
name: 'refresh',
size: 56,
text: '刷新'
}, {
name: 'help',
size: 56,
text: '帮助'
}, {
name: 'edit',
size: 56,
text: '反馈',
openType: 'feedback'
}]
]
}
},
methods: {
onClick(e, type) {
console.log(e)
this.show = false
},
cancel(type) {
this.show = false
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 用于替换默认标题内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| show | Boolean | 是否显示分享面板 | false | - |
| itemList | Array | 分享按钮数据，具体数据格式见下方说明 | [ ] | - |
| width | Number, String | 分享按钮宽度（高度与宽度相等），单位rpx | 108 | - |
| itemBackground | String | 分享按钮背景色，优先使用 itemList 中传入的背景色 | transparent | - |
| radius | Boolean | 分享面板是否需要设置圆角 | true | - |
| background | String | 分享面板背景色 | #EAEAEA | - |
| title | String | 分享面板标题 | 分享到 | - |
| size | Number, String | 标题字体大小，单位rpx | 24 | - |
| color | String | 标题字体颜色 | #7f7f7f | - |
| btnText | String | 取消按钮文本 | 取消 | - |
| btnSize | Number, String | 取消按钮文本字体大小，单位rpx | 32 | - |
| btnColor | String | 取消按钮文本颜色 | #181818 | - |
| btnBackground | String | 取消按钮背景颜色 | transparent | - |
| lineColor | String | 取消按钮上边框颜色 | #ddd | - |
| maskBackground | String | 遮罩层背景颜色 | rgba(0,0,0,.6) | - |
| maskClosable | Boolean | 点击遮罩层，是否可关闭分享面板（触发 @cancel 事件） | false | - |
| zIndex | Number, String | 分享面板层级z-index值 | 1001 | Nvue端不支持，默认越靠后的元素层级越高 |
| isFull | Boolean | 分享按钮是否两端对齐，仅在内容不足以滚动时使用 | false | - |
| padding | Number, String | 分享按钮列表左右内边距，单位rpx | 20 | - |
| safeArea V1.5.0+ | Boolean | 是否适配底部安全区 | true | - |
//itemList 数据格式以及属性值说明。以下属性值为约定属性，其他属性可自定义扩展。
//数据格式一，单行数据
[{
//字体图标名称，具体可参考 fui-icon 组件，优先级高于图片图标
name: '',
//字体图标大小，单位rpx
size: 120,
//字体图标颜色，可选
color: '#181818',
//图片图标src地址，优先级低于字体图标，可选
src: '',
//图片图标宽度，单位rpx，可选
width: 96,
//分享按钮文本
text: '微信',
//分享按钮字体大小，单位rpx，可选
textSize: 24,
//分享按钮字体颜色,可选
textColor: '',
//分享按钮背景色，优先级高于 itemBackground 属性
background: '',
//对应button 按钮的open-type属性值，V1.9.9+ 支持
openType:''
}]
//数据格式二，多行数据
[
[{
//字体图标名称，具体可参考 fui-icon 组件，优先级高于图片图标
name: '',
//字体图标大小，单位rpx
size: 120,
//字体图标颜色，可选
color: '#181818',
//图片图标src地址，优先级低于字体图标，可选
src: '',
//图片图标宽度，单位rpx，可选
width: 96,
//分享按钮文本
text: '微信',
//分享按钮字体大小，单位rpx，可选
textSize: 24,
//分享按钮字体颜色,可选
textColor: '',
//分享按钮背景色，优先级高于 itemBackground 属性
background: '',
//对应button 按钮的open-type属性值，V1.9.9+ 支持
openType:''
}],
[{
//字体图标名称，具体可参考 fui-icon 组件，优先级高于图片图标
name: '',
//字体图标大小，单位rpx
size: 120,
//字体图标颜色，可选
color: '#181818',
//图片图标src地址，优先级低于字体图标，可选
src: '',
//图片图标宽度，单位rpx，可选
width: 96,
//分享按钮文本
text: '微信',
//分享按钮字体大小，单位rpx，可选
textSize: 24,
//分享按钮字体颜色,可选
textColor: '',
//分享按钮背景色，优先级高于 itemBackground 属性
background: '',
//对应button 按钮的open-type属性值，V1.9.9+ 支持
openType:''
}]
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Events
注意：@click 事件回调参数中，当数据为单行时，index为按钮索引，无subIndex参数，当数据为多行时，index为数据行索引，subIndex为按钮索引。
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击分享按钮时触发 | { index:按钮或列表行索引值 subIndex:按钮索引值 item:分享按钮数据对象 } |
| @cancel | 点击取消按钮和遮罩（maskClosable = true）时触发 | - |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。