ActionSheet 动作面板

底部弹出式操作面板，常用于微信分享菜单、照片上传途径选择、危险操作二次确认等场景。

---

代码示例

1. 微信同款动作面板 (WeChat Style ActionSheet)

支持标题 title、副说明文本 description、项目副文本 description 与图标 icon。

<template>
  <view>
    <mu-button type="primary" block radius="full" @click="show = true">
      打开微信式动作面板
    </mu-button>

    <mu-action-sheet
      v-model:show="show"
      title="网页由 mp.weixin.qq.com 提供"
      description="请选择您要执行的网页操作"
      :items="wechatActions"
      @select="onSelect"
    />
  </view>
</template>

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

const show = ref(false)
const wechatActions = ref([
  { text: '发送给朋友', description: '分享网页链接给微信好友', icon: 'share-2' },
  { text: '分享到朋友圈', description: '发布网页至微信朋友圈', icon: 'aperture' },
  { text: '复制链接', description: '拷贝当前 H5 链接', icon: 'copy' },
  { text: '投诉举报', description: '举报该网页违规内容', icon: 'shield-off', danger: true }
])

const onSelect = ({ item }) => {
  console.log('选中操作:', item.text)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	是否显示动作面板	Boolean	true | false	false
items / actions	菜单列表集合 [{ text, description, icon, danger, disabled, badge }]	Array	-	[]
title	顶部主标题	String	-	''
description	顶部副标题说明文案	String	-	''
cancelText	底部取消按钮文案	String	-	'取消'
showCancel	是否显示底部取消按钮	Boolean	true | false	true
maskClosable	点击遮罩层是否自动关闭	Boolean	true | false	true

---

菜单项数据结构 (Item Object)

字段名	说明	类型
text / label / name	菜单标题文字	String
description / subText	菜单下方说明小字	String
icon	矢量图标名称	String
img / image	图片图标 URL	String
color	文字色彩	String
danger	是否标红危险项目	Boolean
disabled	是否禁用不可点击	Boolean

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
select / click	点击菜单项时触发	({ index: Number, item: Object })
cancel	点击取消按钮或遮罩层时触发	-
close	面板收起关闭动画完成时触发	-