```html
<div class="demo-block" id="actionsheet-demo1">
  <lx-group>
    <lx-x-switch
      v-model="show1"
      title="一般用法"
    ></lx-x-switch>
    <lx-x-switch
      v-model="show7"
      title="安卓风格"
    ></lx-x-switch>
    <lx-x-switch
      v-model="show2"
      title="显示取消按钮"
    ></lx-x-switch>
    <lx-x-switch
      v-model="show5"
      title="使用数组定义菜单"
    ></lx-x-switch>
  </lx-group>

  <lx-group title="点击遮罩区域不自动关闭">
    <lx-x-switch
      v-model="show4"
      title="基本用法"
    ></lx-x-switch>
  </lx-group>

  <lx-group>
    <lx-x-switch
      v-model="show3"
      title="显示提示文字"
    ></lx-x-switch>
    <lx-x-switch
      v-model="show6"
      title="使用 header slot"
    ></lx-x-switch>
    <lx-x-switch
      v-model="show8"
      title="不自动关闭"
    ></lx-x-switch>
  </lx-group>

  <lx-actionsheet
    v-model="show4"
    :menus="menus1"
    :close-on-clicking-mask="false"
    show-cancel
    @on-click-mask="console('on click mask')"
  ></lx-actionsheet>

  <lx-actionsheet
    v-model="show1"
    :menus="menus1"
    @on-click-menu="click"
  ></lx-actionsheet>

  <lx-actionsheet
    v-model="show2"
    :menus="menus2"
    show-cancel
    @on-click-menu="click"
  ></lx-actionsheet>

  <lx-actionsheet
    v-model="show3"
    :menus="menus3"
    show-cancel
    @on-click-menu="click"
    @on-click-menu-delete="onDelete"
  ></lx-actionsheet>

  <lx-actionsheet
    v-model="show5"
    :menus="menus5"
    show-cancel
    @on-click-menu="click5"
  ></lx-actionsheet>

  <lx-actionsheet
    v-model="show6"
    :menus="menus1"
  >
    <p slot="header">
      {{ label }}
    </p>
  </lx-actionsheet>

  <lx-actionsheet
    v-model="show7"
    :menus="menu7"
    theme="android"
    @on-click-menu="click"
  ></lx-actionsheet>

  <lx-toast v-model="showSuccess">
    删除成功
  </lx-toast>

  <lx-actionsheet
    v-model="show8"
    :menus="menus8"
    :close-on-clicking-mask="false"
    :close-on-clicking-menu="false"
    @on-click-menu="demo8doClose"
  ></lx-actionsheet>
</div>


<script>
// 弹出操作框.md
new Vue({
  el: '#actionsheet-demo1',
  data: {
    show1: false,
    label: '确定咩?删除后就无法撤消了哦',
    menus1: {
      menu1: '分享给朋友',
      menu2: '分享到朋友圈'
    },
    show2: false,
    menus2: {
      menu1: '拍照',
      menu2: '从相册选择'
    },
    show3: false,
    show4: false,
    show5: false,
    show6: false,
    show7: false,
    show8: false,
    menus5: [{
      label: '确定咩?删除后就无法撤消了哦',
      type: 'info'
    }, {
      label: 'Primary',
      type: 'primary',
      value: 'primary',
      otherProp: 'hey'
    }, {
      label: 'Warn',
      type: 'warn'
    }, {
      label: 'Disabled',
      type: 'disabled'
    }, {
      label: 'Default'
    }],
    menu7: {
      menu1: '北京烤鸭',
      menu2: '陕西油泼面',
      menu3: '西安肉夹馍'
    },
    showSuccess: false,
    menus3: {
      'title.noop': '确定咩?<br/><span style="color:#666;font-size:12px;">删除后就无法撤消了哦</span>',
      delete: '<span style="color:red">Delete</span>'
    },
    menus8: {
      menu1: '点我关闭.',
      menu2: '点我关闭。'
    }
  },
  methods: {
    demo8doClose () {
      this.$cvux.loading.show({
        text: 'processing'
      })
      setTimeout(() => {
        this.$cvux.loading.hide()
        this.show8 = false
      }, 1000)
    },
    console (msg) {
      console.log(msg)
    },
    click (key) {
      console.log(key)
    },
    click5 (key, item) {
      console.log(key, item)
    },
    onDelete () {
      this.showSuccess = true
    }
  }
})
</script>
```