Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: db9a7d5f8b
Branches Tags
nutui
/
assets
/
doc.taro.fe8fe3bc.js

doc.taro.fe8fe3bc.js 3.0 KB
History Raw

1 
  1. import{c as t,o as e,C as n}from"./vendor.870c33cc.js";const a={class:"markdown-body"},l=n('<h1>Picker 选择器</h1><h3>介绍</h3><p>提供多个选项集合供用户选择其中一项。</p><h2>安装</h2><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\nimport { Picker } from &#39;@nutui/nutui@taro&#39;;\n\nconst app = createApp();\napp.use(Picker);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html">&lt;nut-picker mode=&quot;selector&quot; :list-data=&quot;listData&quot; @confirm=&quot;confirm&quot;&gt;\n  &lt;nut-cell title=&quot;请选择城市&quot; :desc=&quot;desc&quot;&gt;&lt;/nut-cell&gt;\n&lt;/nut-picker&gt;\n</code></pre><pre><code class="language-javascript">&lt;script&gt;\nexport default createDemo({\n  setup(props, { emit }) {\n    const listData = [\n      &#39;南京市&#39;,\n      &#39;无锡市&#39;,\n      &#39;海北藏族自治区&#39;,\n      &#39;北京市&#39;,\n      &#39;连云港市&#39;,\n      &#39;浙江市&#39;,\n      &#39;江苏市&#39;\n    ];\n    const desc = ref(listData[0]);\n    const confirm = (value: any, res: any) =&gt; {\n      desc.value = res;\n    };\n\n    return {\n      listData,\n      confirm,\n      desc\n    };\n  }\n});\n&lt;/script&gt;\n</code></pre><h3>多列样式</h3><pre><code class="language-html">&lt;nut-picker mode=&quot;multiSelector&quot; :list-data=&quot;listData&quot; @confirm=&quot;confirm&quot;&gt;\n  &lt;nut-cell title=&quot;请选择时间&quot; :desc=&quot;desc&quot;&gt;&lt;/nut-cell&gt;\n&lt;/nut-picker&gt;\n</code></pre><pre><code class="language-javascript">&lt;script&gt;\nexport default createDemo({\n  setup(props, { emit }) {\n    const listData = ref([\n      {\n        values: [&#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;],\n        defaultIndex: 2\n      },\n      {\n        values: [&#39;上午&#39;, &#39;下午&#39;, &#39;晚上&#39;],\n        defaultIndex: 1\n      }\n    ]);\n    const desc = ref(\n      `${listData.value[0].values[listData.value[0].defaultIndex]} ${\n        listData.value[1].values[listData.value[1].defaultIndex]\n      }`\n    );\n    const confirm = (value: any, res: any) =&gt; {\n      desc.value = res.join(&#39; &#39;);\n      listData.value.forEach((item, idx) =&gt; {\n        item.defaultIndex = value[idx];\n      });\n    };\n\n    return {\n      listData,\n      confirm,\n      desc\n    };\n  }\n});\n&lt;/script&gt;\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>list-data</td><td>列表数据</td><td>Array</td><td>-</td></tr><tr><td>mode</td><td>选择类型</td><td>String</td><td>selector</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>confirm</td><td>点击确认时候触发</td><td>event: Event</td></tr></tbody></table>',17),r={expose:[],setup:n=>(n,r)=>(e(),t("div",a,[l]))};export default r;
    2.