Actionsheet 地址栏

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

Events

menus的说明