Actionsheet

Actionsheet

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

actionsheet - 图1

二维码

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

  • 高亮危险操作。将危险操作用红色标注,为他们提供其它替代的安全选项。
  • 提供清晰准确的描述。在页面有多个唤起Action Sheet的对象或选项本身不够明晰的情况下,提供清晰准确的描述是非常有必要的。
  • 不要放置过多选项以至于需要滚动才能看完全部选项。

actionsheet - 图2

Install

安装

局部注册

全局注册

  1. import { Actionsheet } from 'vux'
  2. export default {
  3. components: {
  4. Actionsheet
  5. }
  6. }

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

API

属性

名字类型默认值说明版本要求
valuebooleanfalse是否显示, 使用 v-model 绑定变量
show-cancelbooleanfalse是否显示取消菜单,对安卓风格无效
cancel-textstringcancel(取消)取消菜单的显示文字
themestringios菜单风格,可选值为['ios','android']
menusobjectarray{}菜单项列表,举例:{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

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

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 36,贡献人数 10
airylandjianglingzhangzicaowangshantaoQiongrong JiangFisher光君小散greedyingkimixu717

Changelog

发布日志

  • v2.9.0 [feature] 支持 事件 on-after-show on-after-hide #2465
  • v2.7.4 [fix] 修复值为 0 时事件参数为空的问题 #2209
  • v2.5.6 [fix] 修复取消菜单上的 json 解析错误 #1782
  • v2.5.5 [feature] 支持在 on-click-menu 参数里附带原始 menu 对象 #1772
  • v2.3.5 [feature] 支持 slot:header #1381
  • v2.3.4 [feature] 支持遮罩点击事件 on-click-mask #1496
  • v2.2.0 [enhance] 在使用 v-transfer-dom 的情况下不再处理 Safari 下的 z-index 问题
  • v2.1.1-rc.11 [enhance] 更加流畅的遮罩层动画
  • v2.1.0 [feature] 支持数组定义菜单 #950 @wuchuguang
  • v2.0.0 [change] 更新到 vue@2.0,使用 v-model 而不是:show.sync进行显示属性绑定
  • v2.0.0 [feature] 添加属性 close-on-clicking-mask, 适用于强制选择的场景