import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

ActionSheet \u52A8\u4F5C\u9762\u677F

\u4ECB\u7ECD

\u4ECE\u5E95\u90E8\u5F39\u51FA\u7684\u52A8\u4F5C\u83DC\u5355\u9762\u677F\u3002

\u5B89\u88C5

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

\u57FA\u672C\u7528\u6CD5

\u9ED8\u8BA4

<div @click="switchActionSheet">
   <span><label>\u57FA\u7840\u7528\u6CD5</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>

\u5C55\u793A\u53D6\u6D88\u6309\u94AE

<div @click="switchActionSheet">
  <span><label>\u5C55\u793A\u53D6\u6D88\u6309\u94AE</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="\u53D6\u6D88"
></nut-actionsheet>

\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F

<div @click="switchActionSheet">
   <span><label>\u5C55\u793A\u53D6\u6D88\u6309\u94AE</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="\u53D6\u6D88"
></nut-actionsheet>

\u9009\u9879\u72B6\u6001

<div @click="switchActionSheet">
    <span class="title"><label>\u6027\u522B</label></span>
    <span class="selected-option" v-html="sex"></span>
</div>
<nut-actionsheet
@close="switchActionSheet"
  v-model:visible="state.isVisible4"
  cancel-txt="\u53D6\u6D88"
  :menu-items="menuItemsThree"
></nut-actionsheet>

setup() {
    const state = reactive({
      isVisible: false,
      value: '',
      desc: '\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F'
    });
    const menuItems = [
      {
        name: '\u9009\u9879\u4E00',
        value: 0
      },
      {
        name: '\u9009\u9879\u4E8C',
        value: 1
      },
      {
        name: '\u9009\u9879\u4E09',
        value: 2
      }
    ];
     const switchActionSheet = () => {
       state.isVisible = !state.isVisible
    };
    const chooseItem = (item,index) => {
      console.log(item,index);
    };

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
cancel-txt	\u53D6\u6D88\u6587\u6848	String	\u2018\u53D6\u6D88\u2019
menu-items	\u5217\u8868\u9879	Array	[ ]
option-tag	\u8BBE\u7F6E\u5217\u8868\u9879\u5C55\u793A\u4F7F\u7528\u53C2\u6570	String	\u2018name\u2019
v-model:visible	\u906E\u7F69\u5C42\u53EF\u89C1	Boolean	false
option-sub-tag	\u8BBE\u7F6E\u5217\u8868\u9879\u63CF\u8FF0\u5C55\u793A\u4F7F\u7528\u53C2\u6570	String	\u2018subname\u2019
choose-tag-value	\u8BBE\u7F6E\u9009\u4E2D\u9879\u7684\u503C\uFF0C\u548C\u2019option-tag\u2019\u7684\u503C\u5BF9\u5E94	String	\u2018\u2019
title	\u8BBE\u7F6E\u5217\u8868\u9879\u6807\u9898	String	\u2018\u2019
description	\u8BBE\u7F6E\u5217\u8868\u9879\u526F\u6807\u9898/\u63CF\u8FF0	String	\u2018\u2019
color	\u9AD8\u4EAE\u989C\u8272	String	\u2018#ee0a24\u2019
close-abled	\u906E\u7F69\u5C42\u662F\u5426\u53EF\u5173\u95ED	Boolean	true

Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
choose	\u9009\u62E9\u4E4B\u540E\u89E6\u53D1	\u9009\u4E2D\u5217\u8868\u9879item, \u9009\u4E2D\u7684\u7D22\u5F15\u503Cindex
cancel	\u70B9\u51FB\u53D6\u6D88\u6587\u6848\u65F6\u89E6\u53D1	\u65E0

`,19),c=[p],i={setup(e,{expose:s}){return s({frontmatter:{}}),(o,j)=>(n(),a("div",l,c))}};export{i as default};