弹出式菜单。

引入

  1. import { ActionSheet } from 'we-vue'
  3. Vue.use(ActionSheet)

例子

基本使用

  1. <w-actionsheet 
  2.   type="ios" 
  3.   :actions="actions" 
  4.   cancel-text="取消" 
  5.   v-model="sheetVisible"
  6.  />

指定皮肤样式

  1. <w-actionsheet 
  2.   type="android" 
  3.   :actions="actions" 
  4.   cancel-text="取消" 
  5.   v-model="sheetVisible"
  6. />

带标题（仅 iOS 样式菜单支持）

  1. <w-actionsheet 
  2.   type="ios" 
  3.   title="<h3 style='color: red;'>一个大标题</h3><p>最多两行</p>" 
  4.   :actions="actions" 
  5.   cancel-text="取消" 
  6.   v-model="sheetVisible"
  7. />

API

参数类型说明可选值默认值
typeString皮肤样式'ios', 'android''ios'
titleString标题
cancel-textString取消菜单项文字'Cancel'
actionsArray菜单项
  • 关于菜单标题 title

title 可以是单纯的文字，也可以是一个 html 标签，并且可以在这标签中写入行内样式以实现自定义菜单标题样式。

  • 关于菜单项 actions

上面的 actions 属性用于配置 ActionSheet 需要显示的菜单项以及各菜单项点击后调用的回调函数。下面是一个最简单的配置示例，其中 name 表示菜单名，也即界面里菜单中显示的文字（建议不要太长），method 项可以设置一个函数，用于执行点击该菜单项后进行的业务逻辑。

const actions = [
  {
    name: '示例菜单1',
    method: () => {
      console.log('menu1 clicked')
    }
  },
  {
    name: '示例菜单2',
    method: () => {
      console.log('menu2 clicked')
    }
  },
  {
    name: '示例菜单3',
    method: () => {
      console.log('menu3 clicked')
    }
  }
]