import{c as t,f as e,t as n,A as s,o as l}from"./vendor.91b30fe3.js";const o={class:"markdown-body"},a=s('

ActionSheet 动作面板

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

基本用法(选择类)

默认

<div @click="switchActionSheet">\n   <span><label>基础用法</label></span>\n   <div class="selected-option">state.val }}</div>\n</div>\n<nut-actionsheet\n        :is-visible="state.isVisible"\n        :menu-items="menuItems"\n        @choose="chooseItem"\n      ></nut-actionsheet>\n

展示取消按钮

<div @click="switchActionSheet">\n   <span><label>展示取消按钮</label></span>\n    <div class="selected-option">state.val }}</div>\n</div>\n <nut-actionsheet :is-visible="isVisible" \n    @close="switchActionSheet"\n    :menu-items="menuItems"\n    @choose="chooseItem"\n    cancelTxt="取消"\n></nut-actionsheet>\n

展示描述信息

<div @click.native="switchActionSheet">\n   <span><label>展示取消按钮</label></span>\n    <div class="selected-option">state.val }}</div>\n</div>\n <nut-actionsheet :is-visible="isVisible" \n    @close="switchActionSheet"\n    description="state.desc"\n    :menu-items="menuItems"\n    @choose="chooseItem"\n    cancelTxt="取消"\n></nut-actionsheet>\n

选项状态

',10),i={class:"language-html"},d=s('

\n

自定义内容

<div @click.native="switchActionSheet">\n    <span class="title"><label>内容自定义</label></span>\n    <div class="selected-option">打开</div>\n</div>\n<nut-actionsheet :is-visible="isVisible" \n    @close="switchActionSheet"\n>\n    <div slot="custom" class="custom-wrap"><span>自定义</span></div>\n</nut-actionsheet>\n

setup() {\n    const state = reactive({\n      isVisible: false,\n      value: '',\n      desc: '这是一段描述信息'\n    });\n    const menuItems = [\n      {\n        name: '选项一',\n        value: 0\n      },\n      {\n        name: '选项二',\n        value: 1\n      },\n      {\n        name: '选项三',\n        value: 2\n      }\n    ];\n    const menuItemsStatus = [\n      {\n        name: '着色选项',\n        color: '#ee0a24',\n        value: 0\n      },\n      {\n        name: '禁用选项',\n        disable: true,\n        value: 1\n      }\n    ];\n     const switchActionSheet = () => {\n       state.isVisible = !state.isVisible\n    };\n    const chooseItem = (item,index) => {\n      console.log(item,index);\n    };\n\n

Prop

字段	说明	类型	默认值
cancel-txt	取消文案	String	‘取消’
choose-tag-value	已选值，如果填写，高亮显示	String	-
menu-items	列表项	Array	[ ]
option-tag	设置列表项展示使用参数	String	‘name’

Slot

名称	说明
custom	自定义内容
title	自定义标题
subTitle	自定义副标题

Event

字段	说明	回调参数
choose	选择之后触发	选中列表项
close	关闭时触发	无
cancel	点击取消文案时触发	无

',10),c={expose:[],setup:s=>(s,c)=>(l(),t("div",o,[a,e("pre",null,[e("code",i,'

\n 性别\n '+n(s.sex)+'\n

\n\n',1)]),d]))};export default c;