| 1 |
- 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('<h1>ActionSheet 动作面板</h1><p>从底部弹出的动作菜单面板。</p><h2>基本用法(选择类)</h2><p>默认</p><pre><code class="language-html"><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</code></pre><h2>展示取消按钮</h2><pre><code class="language-html"><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</code></pre><h2>展示描述信息</h2><pre><code class="language-html"><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</code></pre><h2>选项状态</h2>',10),i={class:"language-html"},d=s('<pre><code class="language-javascript">\n</code></pre><h2>自定义内容</h2><pre><code class="language-html"><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</code></pre><pre><code class="language-javascript">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</code></pre><h2>Prop</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>cancel-txt</td><td>取消文案</td><td>String</td><td>‘取消’</td></tr><tr><td>choose-tag-value</td><td>已选值，如果填写，高亮显示</td><td>String</td><td>-</td></tr><tr><td>menu-items</td><td>列表项</td><td>Array</td><td>[ ]</td></tr><tr><td>option-tag</td><td>设置列表项展示使用参数</td><td>String</td><td>‘name’</td></tr></tbody></table><h2>Slot</h2><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>custom</td><td>自定义内容</td></tr><tr><td>title</td><td>自定义标题</td></tr><tr><td>subTitle</td><td>自定义副标题</td></tr></tbody></table><h2>Event</h2><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>choose</td><td>选择之后触发</td><td>选中列表项</td></tr><tr><td>close</td><td>关闭时触发</td><td>无</td></tr><tr><td>cancel</td><td>点击取消文案时触发</td><td>无</td></tr></tbody></table>',10),c={expose:[],setup:s=>(s,c)=>(l(),t("div",o,[a,e("pre",null,[e("code",i,'<div @click.native="switchActionSheet">\n <span class="title"><label>性别</label></span>\n <span class="selected-option">'+n(s.sex)+'</span>\n</div>\n<nut-actionsheet\n@close="switchActionSheet"\n :is-visible="state.isVisible4"\n cancelTxt="取消"\n :menu-items="menuItemsThree"\n ></nut-actionsheet>\n',1)]),d]))};export default c;
|
