当前位置: 首页 > 文档资料 > VUX 中文文档 >

Actionsheet 组件使用教程

优质
小牛编辑
145浏览
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)

属性

名字类型默认值说明版本要求
valuebooleanfalse是否显示, 使用 v-model 绑定变量--
show-cancelbooleanfalse是否显示取消菜单,对安卓风格无效--
cancel-textstringcancel(取消)取消菜单的显示文字--
themestringios菜单风格,可选值为['ios','android']--
menusobject
array
{}菜单项列表,举例:{menu1: '删除'},如果名字上带有.noop表明这是纯文本(HTML)展示,不会触发事件,用于展示描述或者提醒。
v2.1.0开始支持数组类型的菜单,可自定义键值,见下面说明。
--
close-on-clicking-maskbooleantrue点击遮罩时是否关闭菜单,适用于一些进入页面时需要强制选择的场景。v2.0.0
close-on-clicking-menubooleantrue点击菜单时是否自动隐藏v2.3.8

事件

名字参数说明版本要求
@on-click-menu(menuKey, menuItem)点击菜单时触发--
@on-click-menu-{menuKey}(menuKey)点击事件的快捷方式, menuKeylabel的值有关。举例:如果你有一个菜单名字为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类型的文本颜色