# ActionSheet 动作面板


### 介绍
从底部弹出的动作菜单面板。

### 安装

``` javascript
import { createApp } from 'vue';
// vue
import { ActionSheet, Popup } from '@nutui/nutui';
// taro
import { ActionSheet, Popup } from '@nutui/nutui-taro';

const app = createApp();
app.use(ActionSheet).use(Popup);
```

## 基本用法

默认
``` html
<div @click="switchActionSheet">
   <span><label>基础用法</label></span>
   <div class="selected-option" v-html="state.val"></div>
</div>
<nut-actionsheet
  v-model:visible="state.isVisible"
  :menu-items="menuItems"
  @choose="chooseItem"
></nut-actionsheet>
```

## 展示取消按钮
```html
<div @click="switchActionSheet">
  <span><label>展示取消按钮</label></span>
  <div class="selected-option" v-html="state.val"></div>
</div>
<nut-actionsheet v-model:visible="isVisible" 
  @close="switchActionSheet"
  :menu-items="menuItems"
  @choose="chooseItem"
  cancel-txt="取消"
></nut-actionsheet>
```
## 展示描述信息
```html
<div @click="switchActionSheet">
   <span><label>展示取消按钮</label></span>
    <div class="selected-option" v-html="state.val"></div>
</div>
 <nut-actionsheet v-model:visible="isVisible" 
    @close="switchActionSheet"
    description="state.desc"
    :menu-items="menuItems"
    @choose="chooseItem"
    cancel-txt="取消"
></nut-actionsheet>
```

## 选项状态
```html
<div @click="switchActionSheet">
    <span class="title"><label>性别</label></span>
    <span class="selected-option" v-html="sex"></span>
</div>
<nut-actionsheet
@close="switchActionSheet"
  v-model:visible="state.isVisible4"
  cancel-txt="取消"
  :menu-items="menuItemsThree"
></nut-actionsheet>
```

```javascript
setup() {
    const state = reactive({
      isVisible: false,
      value: '',
      desc: '这是一段描述信息'
    });
    const menuItems = [
      {
        name: '选项一',
        value: 0
      },
      {
        name: '选项二',
        value: 1
      },
      {
        name: '选项三',
        value: 2
      }
    ];
     const switchActionSheet = () => {
       state.isVisible = !state.isVisible
    };
    const chooseItem = (item,index) => {
      console.log(item,index);
    };

```

## Prop

| 字段             | 说明                                   | 类型    | 默认值    |
|------------------|----------------------------------------|---------|-----------|
| cancel-txt       | 取消文案                               | String  | '取消'    |
| menu-items       | 列表项                                 | Array   | [ ]       |
| option-tag       | 设置列表项展示使用参数                 | String  | 'name'    |
| v-model:visible       | 遮罩层可见                             | Boolean | false     |
| option-sub-tag   | 设置列表项描述展示使用参数             | String  | 'subname' |
| choose-tag-value | 设置选中项的值，和'option-tag'的值对应 | String  | ''        |
| title            | 设置列表项标题                         | String  | ''        |
| description      | 设置列表项副标题/描述                  | String  | ''        |
| color            | 高亮颜色                               | String  | '#ee0a24' |
| close-abled      | 遮罩层是否可关闭                       | Boolean | true      |


## Event

| 字段   | 说明               | 回调参数                          |
|--------|--------------------|-----------------------------------|
| choose | 选择之后触发       | 选中列表项item, 选中的索引值index |
| cancel | 点击取消文案时触发 | 无                                |