ShareSheet 分享面板

底部弹出式多渠道分享面板，支持自定义微信、朋友圈、QQ、微博、海报等分享按键与矢量/图片图标排版。

---

代码示例

1. 基础多渠道分享面板 (Basic ShareSheet)

<template>
  <view>
    <mu-button type="primary" block radius="full" @click="show = true">
      打开多渠道分享面板
    </mu-button>

    <mu-share-sheet
      v-model:show="show"
      title="分享精彩内容至"
      :options="shareOptions"
      @select="onSelectShare"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
const shareOptions = ref([
  { name: '微信好友', icon: 'message-circle', color: '#07C160' },
  { name: '朋友圈', icon: 'aperture', color: '#07C160' },
  { name: 'QQ 好友', icon: 'send', color: '#12B7F5' },
  { name: '新浪微博', icon: 'share-2', color: '#E6162D' },
  { name: '复制链接', icon: 'copy', color: '#171717' },
  { name: '生成海报', icon: 'image', color: '#6366F1' }
])

const onSelectShare = (item) => {
  console.log('选择分享渠道:', item.name)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	是否显示分享面板	Boolean	true | false	false
options	分享渠道列表 [{ name, icon, img, color }]	Array	-	[...]
title	顶部主标题文本	String	-	'分享至'
showCancel	是否显示底部取消按钮	Boolean	true | false	true
cancelText	底部取消按钮文案	String	-	'取消'
colCount	每行显示的渠道数量	Number	-	4

---

选项数据结构 (Option Object)

字段名	说明	类型
name / text	渠道名称 (如 '微信好友')	String
icon	矢量图标名称	String
img / image	图片图标 URL	String
color	图标圆角背景色	String

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
select	点击某个分享渠道时触发	(item: Object)
close	面板关闭收起动画完成时触发	-