ActionSheet 动作面板

Scan me!

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

引入

  1. import { ActionSheet } from 'mand-mobile'
  2. Vue.component(ActionSheet.name, ActionSheet)
  3. this.$actionsheet.create({ /* ... */ }) // 全量引入

代码演示

基本

ActionSheet 动作面板 - 图2

  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: '操作说明的标题',
  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.  

单例模式

ActionSheet 动作面板 - 图3

        <template>
  <div class="md-example-child md-example-child-action-sheet">
    <md-button @click="$_showActionSheet">唤起动作面板</md-button>
  </div>
</template>

<script>
import {ActionSheet, Button, Dialog} from 'mand-mobile'

export default {
  name: 'action-sheet-demo',
  components: {
    [Button.name]: Button,
  },
  methods: {
    $_showActionSheet() {
      ActionSheet.create({
        value: true,
        title: '操作说明的标题',
        options: [
          {
            label: '选项1',
            value: 0,
          },
          {
            label: '选项2',
            value: 1,
          },
          {
            label: '选项3',
            value: 2,
          },
        ],
        defaultIndex: 1,
        invalidIndex: 2,
        cancelText: '取消',
        onCancel: this.$_cancel,
        onSelected: this.$_selected,
      })
    },
    $_selected(item) {
      Dialog.alert({
        content: `selected: ${JSON.stringify(item)}`,
      })
      console.log('action-sheet selected:', JSON.stringify(item))
    },
    $_cancel() {
      Dialog.alert({
        content: 'cancel',
      })
      console.log('action-sheet cancel')
    },
  },
}

</script>

      

API

ActionSheet Props

属性说明类型默认值备注
v-model面板是否可见Booleanfalse-
title面板标题String--
options面板选项Array<{text, value}>[]-
default-index默认选中项Boolean0-
invalid-index禁用选择项索引Number-1-
cancel-text取消按钮文案String--
large-radius 2.4.0+大圆角模式Booleanfalse-

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}>[]-
defaultIndex默认选中项Boolean0-
invalidIndex禁用选择项索引Number-1-
cancelText取消按钮文案String--
maxHeight面板最高高度, 超出后可滚动Number400单位px
onShow面板展示回调Function--
onHide面板隐藏回调Function--
onCancel取消选择回调Function--
onSelected选择回调Function(item: {text, value})--
closeAll()

关闭所有全局操作菜单

destroyAll()

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