---
nav: default
---
### Actionsheet
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Factionsheet"/>
<a href="demo/#/component/actionsheet" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/actionsheet</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/actionsheet" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

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

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

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

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

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

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

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

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

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

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

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

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

<script>
import { Actionsheet, Group, XSwitch, Toast } from '../components/_index'

export default {
  components: {
    Actionsheet,
    Group,
    XSwitch,
    Toast
  },
  data () {
    return {
      show1: false,
      label: '确定咩?<br/><span style="color:#666;font-size:12px;">删除后就无法撤消了哦</span>',
      menus1: {
        menu1: '分享给朋友',
        menu2: '分享到朋友圈'
      },
      show2: false,
      menus2: {
        menu1: '拍照',
        menu2: '从相册选择'
      },
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      menus5: [{
        label: '确定咩?<br/><span style="color:#666;font-size:12px;">删除后就无法撤消了哦</span>',
        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>

<style>
.popup0 {
  padding-bottom:15px;
  height:200px;
}
.popup1 {
  width:100%;
  height:100%;
}
</style>

```

#### Github Issue