ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: fe7f7c7a0b
ブランチ タグ
nutui
/
3.1.5
/
doc.f15eb49b.js

doc.f15eb49b.js 4.8 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as n}from"./vendor.6bc94963.js";const t={class:"markdown-body"},l=[n('<h1>Elevator 电梯楼层</h1><h3>介绍</h3><p>用于列表快速定位以及索引的显示</p><h3>安装</h3><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-comment">// vue</span>\n<span class="hljs-keyword">import</span> { Elevator } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { Elevator } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Elevator);\n</code></pre><h3>基本用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-elevator</span> <span class="hljs-attr">:index-list</span>=<span class="hljs-string">&quot;dataList&quot;</span> <span class="hljs-attr">:height</span>=<span class="hljs-string">&quot;260&quot;</span> @<span class="hljs-attr">click-item</span>=<span class="hljs-string">&quot;clickItem&quot;</span> @<span class="hljs-attr">click-index</span>=<span class="hljs-string">&quot;clickIndex&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-elevator</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">acceptKey</span>: <span class="hljs-string">&#39;num&#39;</span>,\n      <span class="hljs-attr">dataList</span>: [\n        {\n          <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;A&#39;</span>,\n          <span class="hljs-attr">list</span>: [\n            {\n              <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;安徽&#39;</span>,\n              <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>\n            }\n          ]\n        }\n        ...\n      ],\n      <span class="hljs-attr">dataList2</span>: [\n        {\n          <span class="hljs-attr">num</span>: <span class="hljs-string">&#39;一&#39;</span>,\n          <span class="hljs-attr">list</span>: [\n            {\n              <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;北京&#39;</span>,\n              <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>\n            }\n          ]\n        }\n        ...\n      ]\n    });\n\n    <span class="hljs-keyword">const</span> clickItem = <span class="hljs-function">(<span class="hljs-params">key: string, item: any</span>) =&gt;</span> {\n      <span class="hljs-built_in">console</span>.log(key, <span class="hljs-built_in">JSON</span>.stringify(item));\n    };\n\n    <span class="hljs-keyword">const</span> clickIndex = <span class="hljs-function">(<span class="hljs-params">key: string</span>) =&gt;</span> {\n      <span class="hljs-built_in">console</span>.log(key);\n    };\n\n    <span class="hljs-keyword">return</span> { ...toRefs(state), clickItem, clickIndex };\n  }\n</code></pre><h3>自定义索引</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-elevator</span> <span class="hljs-attr">:index-list</span>=<span class="hljs-string">&quot;dataList2&quot;</span> <span class="hljs-attr">:height</span>=<span class="hljs-string">&quot;220&quot;</span> <span class="hljs-attr">:acceptKey</span>=<span class="hljs-string">&quot;acceptKey&quot;</span> @<span class="hljs-attr">click-item</span>=<span class="hljs-string">&quot;clickItem&quot;</span> @<span class="hljs-attr">click-index</span>=<span class="hljs-string">&quot;clickIndex&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-elevator</span>&gt;</span>\n</code></pre><h2>API</h2><h3>Prop</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>height</td><td>电梯区域的高度</td><td>Number、String</td><td><code>200px</code></td></tr><tr><td>accept-key</td><td>索引 key 值</td><td>String</td><td><code>title</code></td></tr><tr><td>index-list</td><td>索引列表</td><td>Array（item需包含 id、name属性）</td><td><code>[{id: 0, name: &#39;&#39;}]</code></td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click-item</td><td>点击内容</td><td>key: string, item: { id: 0, name: ‘’ }</td></tr><tr><td>click-index</td><td>点击索引</td><td>key: string</td></tr></tbody></table>',15)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};
    2.