Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: fd0e987e90
Branches Tags
nutui
/
3.1.5
/
doc-legacy.84c84d43.js

doc-legacy.84c84d43.js 11 KB
History Raw

1 
  1. System.register(["./vendor-legacy.d8a4b3f3.js"],(function(s){"use strict";var a,n,t;return{setters:[function(s){a=s.e,n=s.o,t=s.G}],execute:function(){const l={class:"markdown-body"},p=[t('<h1>Picker 选择器</h1><h3>介绍</h3><p>提供多个选项集合供用户选择其中一项。</p><h2>安装</h2><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Picker,Popup } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Picker);\napp.use(Popup);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;请选择城市&quot;</span> <span class="hljs-attr">:desc</span>=<span class="hljs-string">&quot;desc&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;open&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-picker</span>\n    <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n    <span class="hljs-attr">:list-data</span>=<span class="hljs-string">&quot;listData&quot;</span>\n    <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;城市选择&quot;</span>\n    @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span> \n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-picker</span>&gt;</span>\n</code></pre><pre><code class="language-javascript">&lt;script&gt;\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createDemo({\n  <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params">props, { emit }</span>)</span> {\n    <span class="hljs-keyword">const</span> show = ref(<span class="hljs-literal">false</span>);\n    <span class="hljs-keyword">const</span> listData = [\n      <span class="hljs-string">&#39;南京市&#39;</span>,\n      <span class="hljs-string">&#39;无锡市&#39;</span>,\n      <span class="hljs-string">&#39;海北藏族自治区&#39;</span>,\n      <span class="hljs-string">&#39;北京市&#39;</span>,\n      <span class="hljs-string">&#39;连云港市&#39;</span>,\n      <span class="hljs-string">&#39;浙江市&#39;</span>,\n      <span class="hljs-string">&#39;江苏市&#39;</span>\n    ];\n\n    <span class="hljs-keyword">return</span> {\n      listData,\n      <span class="hljs-attr">open</span>: <span class="hljs-function">(<span class="hljs-params">index</span>) =&gt;</span> {\n        show.value = <span class="hljs-literal">true</span>;\n      },\n      <span class="hljs-attr">confirm</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {\n        desc.value = res;\n      }\n    };\n  }\n});\n&lt;/script&gt;\n</code></pre><h3>多列样式</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;请选择时间&quot;</span> <span class="hljs-attr">:desc</span>=<span class="hljs-string">&quot;desc&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;open&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-picker</span>\n    <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n    <span class="hljs-attr">:list-data</span>=<span class="hljs-string">&quot;listData&quot;</span>\n    <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;多列选择&quot;</span>\n    @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span>\n    @<span class="hljs-attr">close</span>=<span class="hljs-string">&quot;close&quot;</span>\n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-picker</span>&gt;</span>\n</code></pre><pre><code class="language-javascript">&lt;script&gt;\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createDemo({\n  <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params">props, { emit }</span>)</span> {\n    <span class="hljs-keyword">const</span> show = ref(<span class="hljs-literal">false</span>);\n    <span class="hljs-keyword">const</span> listData = [\n      {\n        <span class="hljs-attr">values</span>: [<span class="hljs-string">&#39;周一&#39;</span>, <span class="hljs-string">&#39;周二&#39;</span>, <span class="hljs-string">&#39;周三&#39;</span>, <span class="hljs-string">&#39;周四&#39;</span>, <span class="hljs-string">&#39;周五&#39;</span>],\n        <span class="hljs-attr">defaultIndex</span>: <span class="hljs-number">2</span>\n      },\n      <span class="hljs-comment">// 第二列</span>\n      {\n        <span class="hljs-attr">values</span>: [<span class="hljs-string">&#39;上午&#39;</span>, <span class="hljs-string">&#39;下午&#39;</span>, <span class="hljs-string">&#39;晚上&#39;</span>],\n        <span class="hljs-attr">defaultIndex</span>: <span class="hljs-number">1</span>\n      }\n    ];\n\n    <span class="hljs-keyword">return</span> {\n      listData,\n      <span class="hljs-attr">open</span>: <span class="hljs-function">(<span class="hljs-params">index</span>) =&gt;</span> {\n        show.value = <span class="hljs-literal">true</span>;\n      },\n      <span class="hljs-attr">confirm</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {\n        desc.value = res.join(<span class="hljs-string">&#39; &#39;</span>);\n      }\n    };\n  }\n});\n&lt;/script&gt;\n</code></pre><h3>多级联动</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;地址&quot;</span> <span class="hljs-attr">:desc</span>=<span class="hljs-string">&quot;desc&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;open&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-picker</span>\n    <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>\n    <span class="hljs-attr">:list-data</span>=<span class="hljs-string">&quot;listData&quot;</span>\n    <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;地址选择&quot;</span>\n    @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span> \n&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-picker</span>&gt;</span>\n</code></pre><pre><code class="language-javascript">&lt;script&gt;\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createDemo({\n  <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params">props, { emit }</span>)</span> {\n    <span class="hljs-keyword">const</span> show = ref(<span class="hljs-literal">false</span>);\n    <span class="hljs-keyword">const</span> listData = [\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;浙江&#39;</span>,\n        <span class="hljs-attr">children</span>: [\n          {\n            <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;杭州&#39;</span>,\n            <span class="hljs-attr">children</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;西湖区&#39;</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;余杭区&#39;</span> }]\n          },\n          {\n            <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;温州&#39;</span>,\n            <span class="hljs-attr">children</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;鹿城区&#39;</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;瓯海区&#39;</span> }]\n          }\n        ]\n      },\n      {\n        <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;福建&#39;</span>,\n        <span class="hljs-attr">children</span>: [\n          {\n            <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;福州&#39;</span>,\n            <span class="hljs-attr">children</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;鼓楼区&#39;</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;台江区&#39;</span> }]\n          },\n          {\n            <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;厦门&#39;</span>,\n            <span class="hljs-attr">children</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;思明区&#39;</span> }, { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;海沧区&#39;</span> }]\n          }\n        ]\n      }\n    ];\n\n    <span class="hljs-keyword">return</span> {\n      listData,\n      <span class="hljs-attr">open</span>: <span class="hljs-function">(<span class="hljs-params">index</span>) =&gt;</span> {\n        show.value = <span class="hljs-literal">true</span>;\n      },\n      <span class="hljs-attr">confirm</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {\n        desc.value = res.join(<span class="hljs-string">&#39; &#39;</span>);\n      }\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>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)];s("default",{setup:(s,{expose:t})=>(t({frontmatter:{}}),(s,t)=>(n(),a("div",l,p)))})}}}));
    2.