ActionSheet 动作面板

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

基本用法

默认

<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.native="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.native="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

Event