ActionSheet 动作面板

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

引入

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

代码演示

基本

<template>
  <div class="md-example-child md-example-child-action-sheet">
    <md-button @click="$_showActionSheet">唤起动作面板</md-button>
    <md-action-sheet
      v-model="value"
      :title="title"
      :default-index="defaultIndex"
      :invalid-index="invalidIndex"
      :cancel-text="cancelText"
      :options="options"
      @selected="$_selected"
      @cancel="$_cancel"
    ></md-action-sheet>
  </div>
</template>
<script>
import {ActionSheet, Button, Dialog} from 'mand-mobile'
export default {
  name: 'action-sheet-demo',
  height: 500,
  components: {
    [ActionSheet.name]: ActionSheet,
    [Button.name]: Button,
  },
  data() {
    return {
      value: false,
      title: '操作说明的title',
      options: [
        {
          label: '选项1',
          value: 0,
        },
        {
          label: '选项2',
          value: 1,
        },
        {
          label: '选项3',
          value: 2,
        },
      ],
      defaultIndex: 1,
      invalidIndex: 2,
      cancelText: '取消',
    }
  },
  methods: {
    $_showActionSheet() {
      this.value = true
    },
    $_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

ActionSheet Events

@selected(item)

选择事件

@cancel()

取消选择事件

@show()

面板展示事件

@hide()

面板隐藏事件

ActionSheet Static Methods

create(props)

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

closeAll()

关闭所有全局操作菜单

destroyAll()

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