nutui/site_docs/docs/actionsheet/doc.md

ActionSheet 动作面板

介绍

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

安装

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);

基本用法

默认

<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>

展示取消按钮

<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>

展示描述信息

<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>

选项状态

<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>

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	点击取消文案时触发	无