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

doc.e591bee1.js 19 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as t}from"./vendor.92dabd7f.js";const n={class:"markdown-body"},l=[t('<h1>Tabbar 标签栏</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> { Tabbar,TabbarItem } <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> { Tabbar,TabbarItem } <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(Tabbar);\napp.use(TabbarItem);\n\n</code></pre><h2>代码示例</h2><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar</span> @<span class="hljs-attr">tab-switch</span>=<span class="hljs-string">&quot;tabSwitch&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;首页&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;分类&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;category&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;发现&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;find&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;购物车&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;我的&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar</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-function"><span class="hljs-keyword">function</span> <span class="hljs-title">tabSwitch</span>(<span class="hljs-params">item: object, index: number</span>) </span>{\n    <span class="hljs-built_in">console</span>.log(item, index);\n  }\n  <span class="hljs-keyword">return</span> {\n    tabSwitch,\n  };\n},\n</code></pre><h3>自定义图片链接</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar</span> @<span class="hljs-attr">tab-switch</span>=<span class="hljs-string">&quot;tabSwitch&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;首页&quot;</span>\n          <span class="hljs-attr">img</span>= <span class="hljs-string">&#39;http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg&#39;</span>\n           <span class="hljs-attr">activeImg</span>=<span class="hljs-string">&#39;http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg&#39;</span>\n      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;分类&quot;</span> \n          <span class="hljs-attr">img</span>=<span class="hljs-string">&quot;http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg&quot;</span>\n          <span class="hljs-attr">activeImg</span>=<span class="hljs-string">&#39;http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg&#39;</span>\n      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;发现&quot;</span> \n          <span class="hljs-attr">img</span>=<span class="hljs-string">&quot;http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg&quot;</span>\n          <span class="hljs-attr">activeImg</span>=<span class="hljs-string">&#39;http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg&#39;</span>\n      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;购物车&quot;</span> \n         <span class="hljs-attr">img</span>=<span class="hljs-string">&quot;http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg&quot;</span>\n         <span class="hljs-attr">activeImg</span>=<span class="hljs-string">&#39;http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg&#39;</span>\n      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;我的&quot;</span> \n         <span class="hljs-attr">img</span>=<span class="hljs-string">&quot;http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg&quot;</span>\n         <span class="hljs-attr">activeImg</span>=<span class="hljs-string">&#39;http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg&#39;</span>\n      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar</span>&gt;</span>\n</code></pre><h3>自定义选中</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;active&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;首页&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;分类&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;category&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;发现&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;find&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;购物车&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;我的&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar</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> active = ref(<span class="hljs-number">2</span>)\n  <span class="hljs-keyword">return</span> {\n    active\n  };\n},\n</code></pre><h3>徽标提示</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;首页&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home&quot;</span> <span class="hljs-attr">num</span>=<span class="hljs-string">&quot;11&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;分类&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;category&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;发现&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;find&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;购物车&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart&quot;</span> <span class="hljs-attr">num</span>=<span class="hljs-string">&quot;110&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;我的&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar</span>&gt;</span>\n</code></pre><h3>自定义颜色</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">unactive-color</span>=<span class="hljs-string">&quot;#7d7e80&quot;</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;首页&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;分类&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;category&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;发现&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;find&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;购物车&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;我的&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar</span>&gt;</span>\n</code></pre><h3>三个图标的标签栏</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">unactive-color</span>=<span class="hljs-string">&quot;#7d7e80&quot;</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;首页&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;分类&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;category&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;发现&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;find&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar</span>&gt;</span>\n</code></pre><h3>固定底部，可自由跳转</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">:bottom</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;首页&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;分类&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;category&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;发现&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;find&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span>\n    <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;购物车&quot;</span>\n    <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://m.jd.com&quot;</span>\n    <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart&quot;</span>\n  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-tabbar-item</span>\n    <span class="hljs-attr">tab-title</span>=<span class="hljs-string">&quot;我的&quot;</span>\n    <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;######&quot;</span>\n    <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;my&quot;</span>\n  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-tabbar</span>&gt;</span>\n</code></pre><h3>Prop</h3><h3>nut-tabbar</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model:visible</td><td>选中标签的索引值</td><td>number</td><td>0</td></tr><tr><td>bottom</td><td>是否固定在页面底部</td><td>Booble</td><td>false</td></tr><tr><td>size</td><td>icon的尺寸/图片的宽高</td><td>string</td><td>‘20px’</td></tr><tr><td>unactive-color</td><td>icon未激活的颜色</td><td>string</td><td>#7d7e80</td></tr><tr><td>active-color</td><td>icon激活的颜色</td><td>string</td><td>#1989fa</td></tr></tbody></table><h3>tabbar-item</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>tab-title</td><td>标签页的标题</td><td>String</td><td>–</td></tr><tr><td>icon</td><td>标签页显示的<a href="#/icon">图标名称</a></td><td>String</td><td>–</td></tr><tr><td>img</td><td>标签页显示图片链接</td><td>String</td><td>–</td></tr><tr><td>activeImg</td><td>激活以后的标签页显示图片链接（同一个item中icon和img只能选择一个）</td><td>String</td><td>–</td></tr><tr><td>href</td><td>标签页的跳转链接</td><td>String</td><td>–</td></tr><tr><td>num</td><td>页签右上角的数字角标，超出99之后为99+</td><td>Number</td><td>–</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>tab-switch</td><td>切换页签时触发事件</td><td>点击的数据和索引值</td></tr></tbody></table>',29)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
    2.