Question

import { Actionsheet } from 'feui';
components: {
  [Actionsheet.name]: Actionsheet
}
data() {
  return {
    show1: false,    show2: false,    show3: false,    show4: false,
    headerSlot: tips,
    menus1: { menu1: "分享给朋友",
      ...
    },
    menus5: [
      {label: tips, type: "info" },
      ...
    ],
    menus8: { menu1: "点我关闭",
      ...
    }
  };
}

代码演示

基础用法

<fe-switch title="基本使用" v-model="show1"></fe-switch>
<fe-actionsheet v-model="show1" :menus="menus1"
  @on-click-menu="click">
</fe-actionsheet>

Android样式

<fe-switch title="Android样式" v-model="show7"></fe-switch>
<fe-actionsheet v-model="show7" :menus="menus7" 
  theme="android" @on-click-menu="click">
</fe-actionsheet>

显示取消菜单

<fe-switch title="显示取消菜单" v-model="show2"></fe-switch>
<fe-actionsheet v-model="show2" :menus="menus2"
  @on-click-menu="click" show-cancel>
</fe-actionsheet>

使用数组定义菜单

<fe-switch title="使用数组定义菜单" v-model="show5"></fe-switch>
<fe-actionsheet v-model="show5" :menus="menus5" show-cancel
  @on-click-menu="click">
</fe-actionsheet>

点击遮罩区域不自动关闭

<fe-switch title="点击遮罩区域不自动关闭" v-model="show4"></fe-switch>
<fe-actionsheet v-model="show4" :menus="menus1"
  :close-on-clicking-mask="false" show-cancel>
</fe-actionsheet>

显示提示文字

<fe-switch title="显示提示文字" v-model="show3"></fe-switch>
<fe-actionsheet v-model="show3" :menus="menus3"
  @on-click-menu="click" @on-click-menu-delete="onDelete"
  show-cancel>
</fe-actionsheet>

使用headerSlot

<fe-switch title="使用header Slot" v-model="show6"></fe-switch>
<fe-actionsheet v-model="show6" :menus="menus1">
  <p slot="header" v-html="headerSlot"></p>
</fe-actionsheet>

不自动关闭

<fe-switch title="不自动关闭" v-model="show6"></fe-switch>
<div v-transfer-dom>
  <fe-actionsheet v-model="show8" :menus="menus8" 
    @on-click-menu="demo8doClose" 
    :close-on-clicking-mask="false" 
    :close-on-clicking-menu="false">
  </fe-actionsheet>
</div>

API

参数	说明	类型	默认值	可选值
value	是否显示, 使用 v-model 绑定变量	Boolean	false	false,true
show-cancel	是否显示取消菜单，对安卓风格无效	Boolean	false	false,true
cancel-text	取消菜单的显示文字	String	取消	-
theme	菜单风格	String	ios	ios,android
menus	菜单项列表 ,举例：{menu1: ‘删除’}，如果名字上带有.noop表明这是 纯文本(HTML)展示，不会触发事件，用于展示描述或者提醒。 详见下面menus的说明	Array,Object	{}	-
close-on-clicking-mask	点击遮罩时是否关闭菜单	Boolean	true	false,true
close-on-clicking-menu	点击菜单时是否自动隐藏	Boolean	true	false,true
-	-	-	-	-

Events

事件名	参数	说明	备注
on-click-menu	menuKey, menuItem	点击菜单时触发	-
on-click-menu-cancel	-	点击取消菜单时触发	-
on-click-mask	-	点击遮罩时触发	-
on-click-menu-{menuKey}	menuKey	点击事件的快捷方式, menuKey与label的值有关， 详见下面↓↓menus的说明↓↓	-
-	-	-	-

menus的说明

Key值	说明	备注
label	菜单名字，支持文字及html。	-
value	英文字符，表示触发事件的名字，如果不设置不会触发on-click-menu事件	-
type	类型,对应响应的预设样式 primary：默认色， warn：警告， disabled：不可操作，灰色。点击时不会关闭， info：信息提示，点击时不会关闭	-
-	-	-