| 1 |
- import{c as t,o as n,C as e}from"./vendor.870c33cc.js";const d={class:"markdown-body"},o=e('<h1>Picker 选择器</h1><h3>介绍</h3><p>提供多个选项集合供用户选择其中一项。</p><h2>安装</h2><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Picker } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Picker);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>\n<nut-picker\n v-model:visible="show"\n :list-data="listData"\n title="城市选择"\n @confirm="confirm" \n></nut-picker>\n</code></pre><pre><code class="language-javascript"><script>\nexport default createDemo({\n setup(props, { emit }) {\n const show = ref(false);\n const listData = [\n '南京市',\n '无锡市',\n '海北藏族自治区',\n '北京市',\n '连云港市',\n '浙江市',\n '江苏市'\n ];\n\n return {\n listData,\n open: (index) => {\n show.value = true;\n },\n confirm: (res) => {\n desc.value = res;\n }\n };\n }\n});\n</script>\n</code></pre><h3>多列样式</h3><pre><code class="language-html"><nut-cell title="请选择时间" :desc="desc" @click="open"></nut-cell>\n<nut-picker\n v-model:visible="show"\n :list-data="listData"\n title="多列选择"\n @confirm="confirm"\n @close="close"\n></nut-picker>\n</code></pre><pre><code class="language-javascript"><script>\nexport default createDemo({\n setup(props, { emit }) {\n const show = ref(false);\n const listData = [\n {\n values: ['周一', '周二', '周三', '周四', '周五'],\n defaultIndex: 2\n },\n // 第二列\n {\n values: ['上午', '下午', '晚上'],\n defaultIndex: 1\n }\n ];\n\n return {\n listData,\n open: (index) => {\n show.value = true;\n },\n confirm: (res) => {\n desc.value = res.join(' ');\n }\n };\n }\n});\n</script>\n</code></pre><h3>多级联动</h3><pre><code class="language-html"><nut-cell title="地址" :desc="desc" @click="open"></nut-cell>\n<nut-picker\n v-model:visible="show"\n :list-data="listData"\n title="地址选择"\n @confirm="confirm" \n></nut-picker>\n</code></pre><pre><code class="language-javascript"><script>\nexport default createDemo({\n setup(props, { emit }) {\n const show = ref(false);\n const listData = [\n {\n text: '浙江',\n children: [\n {\n text: '杭州',\n children: [{ text: '西湖区' }, { text: '余杭区' }]\n },\n {\n text: '温州',\n children: [{ text: '鹿城区' }, { text: '瓯海区' }]\n }\n ]\n },\n {\n text: '福建',\n children: [\n {\n text: '福州',\n children: [{ text: '鼓楼区' }, { text: '台江区' }]\n },\n {\n text: '厦门',\n children: [{ text: '思明区' }, { text: '海沧区' }]\n }\n ]\n }\n ];\n\n return {\n listData,\n open: (index) => {\n show.value = true;\n },\n confirm: (res) => {\n desc.value = res.join(' ');\n }\n };\n }\n});\n</script>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model:visible</td><td>是否可见</td><td>Boolean</td><td>false</td></tr><tr><td>title</td><td>设置标题</td><td>String</td><td>-</td></tr><tr><td>cancel-text</td><td>取消按钮文案</td><td>String</td><td>取消</td></tr><tr><td>ok-text</td><td>确定按钮文案</td><td>String</td><td>确定</td></tr><tr><td>list-data</td><td>列表数据</td><td>Array</td><td>-</td></tr><tr><td>default-value-index</td><td>初始选中项的索引，默认为 0</td><td>number</td><td>0</td></tr><tr><td>teleport</td><td>指定挂载节点</td><td>String</td><td>“body”</td></tr><tr><td>close-on-click-overlay</td><td>点击蒙层是否关闭对话框</td><td>Boolean</td><td>false</td></tr><tr><td>lock-scroll</td><td>背景是否锁定</td><td>Boolean</td><td>false</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>close</td><td>关闭弹窗时触发</td><td>event: Event</td></tr><tr><td>confirm</td><td>点击确认时候触发</td><td>event: Event</td></tr><tr><td>change</td><td>改变时触发</td><td>val</td></tr></tbody></table>',20),l={expose:[],setup:e=>(e,l)=>(n(),t("div",d,[o]))};export default l;
|
