Actionsheet 组件使用教程
优质
小牛编辑
147浏览
2023-12-01
Action Sheet是由用户操作后触发的一种特定的模态弹出框 ,呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务,或者确认是否开始执行某个可能具有破坏性的操作。
- 高亮危险操作。将危险操作用红色标注,为他们提供其它替代的安全选项。
- 提供清晰准确的描述。在页面有多个唤起Action Sheet的对象或选项本身不够明晰的情况下,提供清晰准确的描述是非常有必要的。
- 不要放置过多选项以至于需要滚动才能看完全部选项。
安装
import { Actionsheet } from 'vux'
export default {
components: {
Actionsheet
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { Actionsheet } from 'vux'
Vue.component('actionsheet', Actionsheet)
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
value | boolean | false | 是否显示, 使用 v-model 绑定变量 | -- |
show-cancel | boolean | false | 是否显示取消菜单,对安卓风格无效 | -- |
cancel-text | string | cancel(取消) | 取消菜单的显示文字 | -- |
theme | string | ios | 菜单风格,可选值为['ios','android'] | -- |
menus | object array | {} | 菜单项列表,举例:{menu1: '删除'} ,如果名字上带有.noop 表明这是纯文本(HTML)展示,不会触发事件,用于展示描述或者提醒。从 v2.1.0 开始支持数组类型的菜单,可自定义键值,见下面说明。 | -- |
close-on-clicking-mask | boolean | true | 点击遮罩时是否关闭菜单,适用于一些进入页面时需要强制选择的场景。 | v2.0.0 |
close-on-clicking-menu | boolean | true | 点击菜单时是否自动隐藏 | v2.3.8 |
事件
名字 | 参数 | 说明 | 版本要求 |
@on-click-menu | (menuKey, menuItem) | 点击菜单时触发 | -- |
@on-click-menu-{menuKey} | (menuKey) | 点击事件的快捷方式, menuKey 与label 的值有关。举例:如果你有一个菜单名字为delete , 那么你可以监听 on-click-menu-delete | -- |
@on-click-menu-cancel | -- | 点击取消菜单时触发 | -- |
@on-click-mask | -- | 点击遮罩时触发 | v2.3.4 |
@on-after-show | -- | 显示动画结束时触发 | v2.9.0 |
@on-after-hide | -- | 隐藏动画结束时触发 | v2.9.0 |
插槽
名字 | 说明 | 版本要求 |
header | 头部位置 | v2.3.5 |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@actionsheet-label-primary-color | #1AAD19 | 菜单项primary类型的文本颜色 | |
@actionsheet-label-warn-color | #E64340 | 菜单项warn类型的文本颜色 | |
@actionsheet-label-default-color | #000 | 菜单项default类型的文本颜色 | |
@actionsheet-label-disabled-color | #ccc | 菜单项disabled类型的文本颜色 |