ActionSheet 动作面板

Scan me!

用于提供场景相关的多个操作动作

引入

  1. import { ActionSheet } from 'mand-mobile'
  2. Vue.component(ActionSheet.name, ActionSheet)

代码演示

基本

  1. <template>
  2. <div class="md-example-child md-example-child-action-sheet">
  3. <md-button @click="$_showActionSheet">唤起动作面板</md-button>
  4. <md-action-sheet
  5. v-model="value"
  6. :title="title"
  7. :default-index="defaultIndex"
  8. :invalid-index="invalidIndex"
  9. :cancel-text="cancelText"
  10. :options="options"
  11. @selected="$_selected"
  12. @cancel="$_cancel"
  13. ></md-action-sheet>
  14. </div>
  15. </template>
  16. <script>
  17. import {ActionSheet, Button, Dialog} from 'mand-mobile'
  18. export default {
  19. name: 'action-sheet-demo',
  20. height: 500,
  21. components: {
  22. [ActionSheet.name]: ActionSheet,
  23. [Button.name]: Button,
  24. },
  25. data() {
  26. return {
  27. value: false,
  28. title: '操作说明的title',
  29. options: [
  30. {
  31. label: '选项1',
  32. value: 0,
  33. },
  34. {
  35. label: '选项2',
  36. value: 1,
  37. },
  38. {
  39. label: '选项3',
  40. value: 2,
  41. },
  42. ],
  43. defaultIndex: 1,
  44. invalidIndex: 2,
  45. cancelText: '取消',
  46. }
  47. },
  48. methods: {
  49. $_showActionSheet() {
  50. this.value = true
  51. },
  52. $_selected(item) {
  53. Dialog.alert({
  54. content: `selected: ${JSON.stringify(item)}`,
  55. })
  56. console.log('action-sheet selected:', JSON.stringify(item))
  57. },
  58. $_cancel() {
  59. Dialog.alert({
  60. content: 'cancel',
  61. })
  62. console.log('action-sheet cancel')
  63. },
  64. },
  65. }
  66. </script>
  67.  

API

ActionSheet Props

属性说明类型默认值备注
v-model面板是否可见Booleanfalse-
title面板标题String--
options面板选项Array<{text, value}>[]-
default-index默认选中项Boolean0-
invalid-index禁用选择项索引Number-1-
cancel-text取消按钮文案String--
max-height1.3.0+面板最高高度, 超出后可滚动Number400单位px

ActionSheet Events

@selected(item)

选择事件

属性说明类型
item选中项的值Object: {text, value}
@cancel()

取消选择事件

@show()

面板展示事件

@hide()

面板隐藏事件

ActionSheet Static Methods

create(props)

静态方法创建操作菜单, 返回ActionSheet实例。可以通过控制实例的value属性来控制显示或隐藏操作菜单。

属性说明类型默认值备注
value面板是否立即可见Booleantrue-
title面板标题String--
options面板选项Array<{text, value}>[]-
default-index默认选中项Boolean0-
invalid-index禁用选择项索引Number-1-
cancel-text取消按钮文案String--
max-height面板最高高度, 超出后可滚动Number400单位px
closeAll()

关闭所有全局操作菜单

destroyAll()

关闭并销毁所有全局操作菜单