ActionSheet 动作面板

用于提供场景相关的多个操作动作

引入

import { ActionSheet } from 'mand-mobile-next'

Vue.createApp().component(ActionSheet.name, ActionSheet)

this.$actionsheet.create({ /* ... */ }) // 全量引入

代码演示

API

ActionSheet Props

属性说明类型默认值备注
v-model选中值String, Numberoptions[number].value
title面板标题String--
options面板选项Array<{text, value}>[]-
invalid-index禁用选择项索引Number-1-
cancel-text取消按钮文案String取消-
default-index默认选中下标Boolean-1-

ActionSheet Events

v-model @update:modelValue(value)

选择事件

属性说明类型
value选中项的值String, Number

v-model:visible @update:visible(value)

属性说明类型
value控制显示隐藏boolean

@cancel()

取消选择事件

@show()

面板展示事件

@hide()

面板隐藏事件


ActionSheet 静态方法

create(props)

静态方法创建操作菜单, 返回ActionSheet实例;创建之后会立即显示。考虑到使用的规范性,不建议直接修改 props 来控制显示隐藏,建议使用实例上的 updateProps 方法来更新 props, 使用 remove 方法来销毁实例

属性说明类型默认值备注
v-model默认选中的值String,Numberoptions[number].value
title面板标题String--
options面板选项Array<{text, value, label}>[]-
invalidIndex禁用选择项索引Number-1-
cancelText取消按钮文案String--
maxHeight面板最高高度, 超出后可滚动Number400单位px
onShow面板展示回调Function--
onHide面板隐藏回调Function--
onCancel取消选择回调Function--
onSelected选择回调Function(item: {text, value})--
onMaskClick点击蒙层回调Function-一般此回调直接隐藏组件即可,见示例