ActionSheet 动作面板

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

引入

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

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

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

代码演示

API

ActionSheet Props

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

标签

日期选择器

# ActionSheet 动作面板

# 引入

# 代码演示

# API

# ActionSheet Props

# ActionSheet Events

# v-model @update:modelValue(value)

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

# @cancel()

# @show()

# @hide()

# ActionSheet 静态方法

# create(props)

ActionSheet 动作面板

引入

代码演示

API

ActionSheet Props

ActionSheet Events

v-model @update:modelValue(value)

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

@cancel()

@show()

@hide()

ActionSheet 静态方法

create(props)