@huteming/ui-actionsheet v1.1.1

引入

import Vue from 'vue'
import { Actionsheet } from '@huteming/ui'

Vue.use(Actionsheet)

代码演示

基础用法

Actionsheet通过menus数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。

export default {
  data() {
    return {
      menus: [
        { label: '选项', value: '返回值' },
      ]
    };
  },

  methods: {
    onShow () {
      Actionsheet(this.menus)
          // 点击菜单关闭
          .then(value => {})
          // 点击取消或遮层关闭
          .catch(() => {})
    }
  }
}

不显示取消按钮

export default {
  data() {
    return {
      menus: [
        { label: '选项', value: '返回值' },
      ]
    };
  },

  methods: {
    onShow () {
      Actionsheet({ menus: this.menus, cancelText: '' })
          // 点击菜单关闭
          .then(value => {})
          // 点击取消或遮层关闭
          .catch(() => {})
    }
  }
}

API

Props

Menu数据结构

actions属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：