ActionsheetInstall
Actionsheet
demo urldemo source codeedit documentcomponent source code
Action Sheet是由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。用户可以使用Action Sheet启动某个任务，或者确认是否开始执行某个可能具有破坏性的操作。
- 高亮危险操作。将危险操作用红色标注，为他们提供其它替代的安全选项。
- 提供清晰准确的描述。在页面有多个唤起Action Sheet的对象或选项本身不够明晰的情况下，提供清晰准确的描述是非常有必要的。
- 不要放置过多选项以至于需要滚动才能看完全部选项。
Install
API
Variables
Props
| name | type | default | description | required version |
| value | boolean | false | if showing the component; use v-model for binding | -- |
| show-cancel | boolean | false | if showing the cancel menu; invalid for android theme | -- |
| cancel-text | string | cancel(取消) | text of cancel menu | -- |
| theme | string | ios | theme of menus, can be in ['ios', 'android'] | -- |
| menus | object array | {} | menu items, for example: {menu1: 'some text'}, menu name with .noop will not trigger click events. Menus supports array since v2.1.0. Keys can be customized. More details below. | -- |
| close-on-clicking-mask | boolean | true | if closing actionsheet when clicking on mask | v2.0.0 |
| close-on-clicking-menu | boolean | true | if hide automatically when clicking on menus | v2.3.8 |
Events
| name | params | description | required version |
| @on-click-menu | (menuKey, menuItem) | fires when clicking on the menu | -- |
| @on-click-menu-{menuKey} | (menuKey) | shortcut event for easier listening, menuKey is related to label. For exapmple, you can listen on on-click-menu-delete if you have a menu named delete | -- |
| @on-click-menu-cancel | -- | fires when clicking on the cancel menu | -- |
| @on-click-mask | -- | fires when clicking on mask | v2.3.4 |
| @on-after-show | -- | fires when show transition ends | v2.9.0 |
| @on-after-hide | -- | fires when hide transition ends | v2.9.0 |
Slots
| name | description | required version |
| header | header | v2.3.5 |
Variables
| name | default | description | inherited name |
| @actionsheet-label-primary-color | #1AAD19 | primary type text color of menu item | |
| @actionsheet-label-warn-color | #E64340 | warn type text color of menu item | |
| @actionsheet-label-default-color | #000 | default type text color of menu item | |
| @actionsheet-label-disabled-color | #ccc | disabled type text color of menu item |
Contributors
Contributors
Total commits quantity: 36，Total contributors quantity: 10
airylandjianglingzhangzicaowangshantaoQiongrong JiangFisher光君小散greedyingkimixu717Changelog
Releases
- v2.9.0 [feature] add event:on-after-show event:on-after-hide #2465
- v2.7.4 [fix] fix wrong event param when value is zero #2209
- v2.5.6 [fix] Fix json parsing issue for cancel menu #1782
- v2.5.5 [feature] Add raw menu item for on-click-menu event #1772
- v2.3.5 [feature] Support slot:header #1381
- v2.3.4 [feature] Support event: on-click-mask #1496
- v2.2.0 [enhance] Donot update handel z-index in Safari when using v-transfer-dom
- v2.1.1-rc.11 [enhance] Better transition for mask
- v2.1.0 [feature] support array type of menu #950 @wuchuguang
- v2.0.0 [change] upgrade to [email protected], use `v-model` instead of `:show.sync`
- v2.0.0 [feature] add prop close-on-clicking-mask