Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: 8cead32988
Branches Tags
nutui
/
assets
/
doc.bccebf85.js

doc.bccebf85.js 6.9 KB
History Raw

1 
  1. import{c as t,o as n,A as a}from"./vendor.91b30fe3.js";const e={class:"markdown-body"},r=a('<h1>Tabbar 列表组件</h1><h3>介绍</h3><p>XXXXXX</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from &#39;vue&#39;;\nimport { Tabbar } from &#39;@nutui/nutui&#39;;\n\nconst app = createApp();\napp.use(Tabbar);\n\n</code></pre><h2>代码示例</h2><h3>基础用法</h3><pre><code class="language-html">&lt;nut-tabbar :tabbar-List=&quot;tabList&quot; @tab-switch=&quot;tabSwitch&quot;&gt;&lt;/nut-tabbar&gt;\n</code></pre><pre><code class="language-javascript">// ...\n  setup() {\n    const tabList = [\n      {\n        tabTitle: &#39;首页&#39;,\n        curr: false,\n        icon: &#39;home&#39;,\n      },\n      {\n        tabTitle: &#39;分类&#39;,\n        curr: false,\n        icon: &#39;category&#39;,\n      },\n      {\n        tabTitle: &#39;发现&#39;,\n        curr: false,\n        icon: &#39;find&#39;,\n      },\n      {\n        tabTitle: &#39;购物车&#39;,\n        curr: false,\n        icon: &#39;cart&#39;,\n      },\n      {\n        tabTitle: &#39;我的&#39;,\n        curr: false,\n        icon: &#39;my&#39;,\n      },\n    ];\n    function tabSwitch(item: object, index: number) {\n      console.log(item, index);\n    }\n    return {\n      ...reactive({\n        tabList,\n      }),\n      tabSwitch,\n    };\n  },\n// ...\n</code></pre><h3>徽标提示</h3><pre><code class="language-html">&lt;nut-tabbar :tabbar-List=&quot;tabList&quot; @tab-switch=&quot;tabSwitch&quot;&gt;&lt;/nut-tabbar&gt;\n</code></pre><pre><code class="language-javascript">// ...\n  setup() {\n    const tabList = [\n      {\n        tabTitle: &#39;首页&#39;,\n        curr: false,\n        icon: &#39;home&#39;,\n      },\n      {\n        tabTitle: &#39;分类&#39;,\n        curr: false,\n        icon: &#39;category&#39;,\n      },\n      {\n        tabTitle: &#39;发现&#39;,\n        curr: false,\n        icon: &#39;find&#39;,\n      },\n      {\n        tabTitle: &#39;购物车&#39;,\n        curr: false,\n        icon: &#39;cart&#39;,\n        num: &#39;12&#39;\n      },\n      {\n        tabTitle: &#39;我的&#39;,\n        curr: false,\n        icon: &#39;my&#39;,\n      },\n    ];\n    function tabSwitch(item: object, index: number) {\n      console.log(item, index);\n    }\n    return {\n      ...reactive({\n        tabList,\n      }),\n      tabSwitch,\n    };\n  },\n// ...\n</code></pre><h3>自定义颜色</h3><pre><code class="language-html">&lt;nut-tabbar :tabbar-List=&quot;tabList&quot; @tab-switch=&quot;tabSwitch&quot; unactiveColor=&quot;#7d7e80&quot; activeColor=&quot;#1989fa&quot; &gt;&lt;/nut-tabbar&gt;\n</code></pre><pre><code class="language-javascript">// ...\n  setup() {\n    const tabList = [\n      {\n        tabTitle: &#39;首页&#39;,\n        curr: false,\n        icon: &#39;home&#39;,\n      },\n      {\n        tabTitle: &#39;分类&#39;,\n        curr: false,\n        icon: &#39;category&#39;,\n      },\n      {\n        tabTitle: &#39;发现&#39;,\n        curr: false,\n        icon: &#39;find&#39;,\n      },\n      {\n        tabTitle: &#39;购物车&#39;,\n        curr: false,\n        icon: &#39;cart&#39;,\n        num: &#39;12&#39;\n      },\n      {\n        tabTitle: &#39;我的&#39;,\n        curr: false,\n        icon: &#39;my&#39;,\n      },\n    ];\n    function tabSwitch(item: object, index: number) {\n      console.log(item, index);\n    }\n    return {\n      ...reactive({\n        tabList,\n      }),\n      tabSwitch,\n    };\n  },\n// ...\n</code></pre><h3>三个图标的标签栏</h3><pre><code class="language-html">&lt;nut-tabbar :tabbar-List=&quot;tabList&quot; @tab-switch=&quot;tabSwitch&quot;&gt;&lt;/nut-tabbar&gt;\n</code></pre><pre><code class="language-javascript">// ...\n  setup() {\n        const tabList = [\n      {\n        tabTitle: &#39;首页&#39;,\n        curr: false,\n        icon: &#39;home&#39;\n      },\n      {\n        tabTitle: &#39;分类&#39;,\n        curr: false,\n        icon: &#39;category&#39;\n      },\n      {\n        tabTitle: &#39;我的&#39;,\n        curr: false,\n        icon: &#39;my&#39;\n      }\n    ];\n    function tabSwitch(item: object, index: number) {\n      console.log(item, index);\n    }\n    return {\n      ...reactive({\n        tabList,\n      }),\n      tabSwitch,\n    };\n  },\n// ...\n</code></pre><h3>固定底部，可自由跳转</h3><pre><code class="language-html">&lt;nut-tabbar :tabbar-List=&quot;tabList&quot; @tab-switch=&quot;tabSwitch&quot; :bottom=&quot;true&quot; &gt;&lt;/nut-tabbar&gt;\n</code></pre><pre><code class="language-javascript">// ...\n  setup() {\n        const tabList = [\n      {\n        tabTitle: &#39;首页&#39;,\n        curr: false,\n        icon: &#39;home&#39;\n      },\n      {\n        tabTitle: &#39;分类&#39;,\n        curr: false,\n        icon: &#39;category&#39;\n      },\n      {\n        tabTitle: &#39;发现&#39;,\n        curr: false,\n        icon: &#39;find&#39;\n      },\n      {\n        tabTitle: &#39;购物车&#39;,\n        curr: false,\n        icon: &#39;cart&#39;,\n        num: &#39;122&#39;\n      },\n      {\n        tabTitle: &#39;我的&#39;,\n        curr: false,\n        icon: &#39;my&#39;\n      }\n    ];\n    function tabSwitch(item: object, index: number) {\n      console.log(item, index);\n    }\n    return {\n      ...reactive({\n        tabList,\n      }),\n      tabSwitch,\n    };\n  },\n// ...\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>type</td><td>页签栏的样式 based/card：based是默认样式如吸底样式，card类型每个卡片间有边界线</td><td>String</td><td>based</td></tr><tr><td>tabbar-list</td><td>渲染数据 ，兼容 tabbar-list 和 tabbarList</td><td>Array</td><td>[]</td></tr><tr><td>bottom</td><td>是否固定在页面底部</td><td>Booble</td><td>false</td></tr><tr><td>unactiveColor</td><td>icon未激活的颜色</td><td>string</td><td>#7d7e80</td></tr><tr><td>activeColor</td><td>icon激活的颜色</td><td>string</td><td>#1989fa</td></tr></tbody></table><h3>tabbar-list</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>tabTitle</td><td>标签页的标题</td><td>String</td><td>–</td></tr><tr><td>curr</td><td>是否为选中的标签页</td><td>Booble</td><td>false</td></tr><tr><td>icon</td><td>标签页显示的icon</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>tabSwitch</td><td>切换页签时触发事件</td><td>点击的索引值和对应的数据</td></tr></tbody></table>',28),c={expose:[],setup:a=>(a,c)=>(n(),t("div",e,[r]))};export default c;
    2.