actionsheet

Actionsheet

demo 原始链接demo 源码编辑文档组件源码

actionsheet - 图1

二维码

Action Sheet是由用户操作后触发的一种特定的模态弹出框，呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。

actionsheet - 图2

Install

安装

局部注册

全局注册

import { Actionsheet } from 'vux'
export default {
  components: {
    Actionsheet
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { Actionsheet } from 'vux'
Vue.component('actionsheet', Actionsheet)

API

名字	类型	默认值	说明	版本要求
value	boolean	false	是否显示, 使用 v-model 绑定变量	—
show-cancel	boolean	false	是否显示取消菜单，对安卓风格无效	—
cancel-text	string	cancel(取消)	取消菜单的显示文字	—
theme	string	ios	菜单风格，可选值为['ios','android']	—
menus	objectarray	{}	菜单项列表，举例：`{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

Variables

## 样式变量

名字	默认值	说明	继承自变量
@actionsheet-label-primary-color	#1AAD19	菜单项primary类型的文本颜色
@actionsheet-label-warn-color	#E64340	菜单项warn类型的文本颜色
@actionsheet-label-default-color	#000	菜单项default类型的文本颜色
@actionsheet-label-disabled-color	#ccc	菜单项disabled类型的文本颜色

Issues