| 1 |
- import{e as s,o as a,G as t}from"./vendor.f7062dc0.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">'vue'</span>;\n<span class="hljs-comment">//vue</span>\n<span class="hljs-keyword">import</span> { Tabbar } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n<span class="hljs-comment">//taro</span>\n<span class="hljs-keyword">import</span> { Tabbar } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui-taro'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Tabbar);\n\n</code></pre><h2>代码示例</h2><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tabbar</span> @<span class="hljs-attr">tab-switch</span>=<span class="hljs-string">"tabSwitch"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"首页"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"分类"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"category"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"发现"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"find"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"购物车"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"我的"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tabbar</span>></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"><<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">"active"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"首页"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"分类"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"category"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"发现"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"find"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"购物车"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"我的"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tabbar</span>></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"><<span class="hljs-name">nut-tabbar</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"首页"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home"</span> <span class="hljs-attr">num</span>=<span class="hljs-string">"11"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"分类"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"category"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"发现"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"find"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"购物车"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart"</span> <span class="hljs-attr">num</span>=<span class="hljs-string">"110"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"我的"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tabbar</span>></span>\n</code></pre><h3>自定义颜色</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">unactive-color</span>=<span class="hljs-string">"#7d7e80"</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#1989fa"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"首页"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"分类"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"category"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"发现"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"find"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"购物车"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"我的"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tabbar</span>></span>\n</code></pre><h3>三个图标的标签栏</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">unactive-color</span>=<span class="hljs-string">"#7d7e80"</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">"#1989fa"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"首页"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"分类"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"category"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"发现"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"find"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tabbar</span>></span>\n</code></pre><h3>固定底部，可自由跳转</h3><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tabbar</span> <span class="hljs-attr">:bottom</span>=<span class="hljs-string">"true"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"首页"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">""</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"home"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"分类"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"category"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"发现"</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">"find"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span>\n <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"购物车"</span>\n <span class="hljs-attr">href</span>=<span class="hljs-string">"https://m.jd.com"</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">"cart"</span>\n ></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tabbar-item</span>\n <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"我的"</span>\n <span class="hljs-attr">href</span>=<span class="hljs-string">"######"</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">"my"</span>\n ></span><span class="hljs-tag"></<span class="hljs-name">nut-tabbar-item</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tabbar</span>></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>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>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>',27)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
|
