ActionSheet 动作面板

动作面板从底部弹出，用于承载一组与当前场景相关的操作。组件支持列表项、禁用与自定义颜色、取消按钮，以及选中后自动关闭。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-action-sheet 的用法，可按需组合。

<template>
  <mu-action-sheet :show="visible" :list="actions"
    @select="onSelect" @cancel="onCancel" @close="visible = false"></mu-action-sheet>
</template>

选项列表

通过 list 传入选项数组，每项包含 name，可选 color 与 disabled；禁用项不触发事件也不会关闭面板。

<mu-action-sheet :show="customVisible" :list="customActions"
  @select="onSelect" @close="customVisible = false"></mu-action-sheet>

取消按钮

控制是否显示取消按钮，默认为显示。

<mu-action-sheet :show="noCancelVisible" :list="actions" :show-cancel="false"
  @select="onSelect" @close="noCancelVisible = false"></mu-action-sheet>

取消文字

设置取消按钮的文字，默认为「取消」。

<mu-action-sheet :show="cancelTextVisible" :list="actions" cancel-text="关闭"
  @select="onSelect" @close="cancelTextVisible = false"></mu-action-sheet>

选中后关闭

控制选中某一项后是否自动关闭面板，默认为自动关闭。

<mu-action-sheet :show="stayVisible" :list="actions" :close-on-select="false"
  @select="onSelect" @cancel="onCancel" @close="stayVisible = false"></mu-action-sheet>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
show	是否显示动作面板	boolean	false
list	选项列表，每项包含 name，可选 color 与 disabled	ActionSheetItem[]	[]
showCancel	是否显示取消按钮	boolean	true
cancelText	取消按钮文字	string	取消
closeOnSelect	选中后是否自动关闭	boolean	true
mask	是否显示遮罩	boolean	true
maskBackground	遮罩背景色	string	rgba(0, 0, 0, 0.6)
closeOnClickMask	点击遮罩是否关闭	boolean	true
zIndex	层级	number	999
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	string	-

事件

组件支持以下事件。

事件名	说明	回调参数
select	选中某一项时触发	item: ActionSheetItem, index: number
cancel	点击取消按钮时触发	-
close	关闭时触发（选中、取消或点击遮罩）	-