ShareSheet 分享面板，主要用于分享或相关操作使用。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

内容两端对齐

通过 isFull 属性设置内容是否两端对齐（仅内容较少不足以滚动时使用），padding 属性设置分享按钮列表左右的内边距，background 属性设置分享面板背景色，lineColor 属性设置取消按钮上边框颜色，show 属性控制分享面板的显示隐藏，itemList 属性设置分享按钮数据，maskClosable 属性设置点击遮罩是否可关闭分享面板。

<wui-share-sheet isFull padding="48" background="#fff" lineColor="#eee" :show="visible" :itemList="items" maskClosable @cancel="cancel" @click="onTap"></wui-share-sheet>

  const visible = ref<any>(false);
  const items = ref<any>([
    {
      name: 'w-wechat',
      color: '#07c160',
      text: '微信好友',
    },
    {
      name: 'w-moments',
      color: '#44DC6B',
      text: '朋友圈',
    },
    {
      name: 'w-qq',
      color: '#3FB7F5',
      text: 'QQ',
    },
    {
      name: 'w-sina',
      color: '#D8070B',
      text: '新浪微博',
    },
  ]);
const onTap = (e) => {
    console.log(e)
    Toast(e.item.text)
    visible.value = false
}
const cancel = () => {
    visible.value = false
}

展示多行

通过 show 属性控制分享面板的显示隐藏，itemList 属性设置分享按钮数据，itemBackground 属性设置分享按钮背景色（优先使用 itemList 中背景色）。

<wui-share-sheet :show="show" :itemList="itemList" itemBackground="#fff" @click="onClick" @cancel="cancel"></wui-share-sheet>

  const itemList = ref<any>([
    [
      {
        name: 'w-wechat',
        size: 72,
        color: '#07c160',
        text: '微信好友',
      },
      {
        name: 'w-moments',
        size: 72,
        color: '#44DC6B',
        text: '朋友圈',
      },
      {
        name: 'w-qq',
        size: 72,
        color: '#3FB7F5',
        text: 'QQ',
      },
      {
        name: 'w-sina',
        size: 72,
        color: '#D8070B',
        text: '新浪微博',
      },
      {
        name: 'w-browser',
        size: 72,
        color: '#465CFF',
        text: '浏览器打开',
      },
      {
        name: 'w-community-fill',
        size: 72,
        color: '#FFB703',
        text: '社区',
      },
    ],
    [
      {
        name: 'w-picture',
        size: 56,
        text: '分享海报',
      },
      {
        name: 'w-link',
        size: 56,
        text: '复制链接',
      },
      {
        name: 'w-search',
        size: 56,
        text: '搜索',
      },
      {
        name: 'w-refresh',
        size: 56,
        text: '刷新',
      },
      {
        name: 'w-help',
        size: 56,
        text: '帮助',
      },
      {
        name: 'w-edit',
        size: 56,
        text: '反馈',
      },
    ],
  ]);
const onClick = (e, type)=> {
    console.log(e)
    show.value = false
}
const cancel = (type)=> {
    show.value = false
}

//itemList 数据格式以及属性值说明。以下属性值为约定属性，其他属性可自定义扩展。
 
//数据格式一，单行数据
[{
	//字体图标名称，具体可参考 wui-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:''
}]

//数据格式二，多行数据

[
	[{
		//字体图标名称，具体可参考 wui-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:''
	}],
	[{
		//字体图标名称，具体可参考 wui-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:''
	}]
]

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	Boolean	是否适配底部安全区	true	-

Events

注意：@click 事件回调参数中，当数据为单行时，index 为按钮索引，无 subIndex 参数，当数据为多行时，index 为数据行索引，subIndex 为按钮索引。

事件名	说明	回调参数
@click	点击分享按钮时触发	{ index:按钮或列表行索引值 subIndex:按钮索引值 item:分享按钮数据对象 }
@cancel	点击取消按钮和遮罩（maskClosable = true）时触发	-