| 1 |
- import{c as t,f as n,t as l,C as a,o as e}from"./vendor.0d0a34e4.js";const u={class:"markdown-body"},o=a('<h1>Tab 选项卡</h1><p>常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式。</p><h2>基础样式，默认 tab-title 宽度均分相等</h2><pre><code class="language-html"><nut-tab>\n <nut-tab-panel tab-title="全部"\n ><p class="content">这里是页签全部内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待付款"\n ><p class="content">这里是页签待付款内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待收获"\n ><p class="content">这里是页签待收获内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已完成"\n ><p class="content">这里是页签已完成内容</p></nut-tab-panel\n >\n</nut-tab>\n</code></pre><h2>默认显示 tab：</h2><p>defaultIndex 设置默认显示 tab switchTab 监听切换 tab 返回事件</p><pre><code class="language-html"><nut-tab :defaultIndex="1" @switchTab="switchTab">\n <nut-tab-panel tab-title="全部"\n ><p class="content">这里是页签全部内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待付款"\n ><p class="content">这里是页签待付款内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待收获"\n ><p class="content">这里是页签待收获内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已完成"\n ><p class="content">这里是页签已完成内容</p></nut-tab-panel\n >\n</nut-tab>\n<script lang="ts">\n import { createComponent } from '@/packages/utils/create';\n const { createDemo } = createComponent('tab');\n export default createDemo({\n setup() {\n function switchTab(activeInddex: number, event: MouseEvent) {\n console.log(activeInddex, event);\n }\n return {\n switchTab\n };\n }\n });\n</script>\n</code></pre><h2>animatedTime 开启切换标签内容时的转场动画时间</h2><pre><code class="language-html"><nut-tab :animatedTime="500">\n <nut-tab-panel tab-title="全部"\n ><p class="content">这里是页签全部内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待付款"\n ><p class="content">这里是页签待付款内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待收获"\n ><p class="content">这里是页签待收获内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已完成"\n ><p class="content">这里是页签已完成内容</p></nut-tab-panel\n >\n</nut-tab>\n</code></pre><h2>禁止 tab 内容滑动</h2><pre><code class="language-html"><nut-tab :no-swiping="true">\n <nut-tab-panel tab-title="全部"\n ><p class="content">这里是页签全部内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待付款"\n ><p class="content">这里是页签待付款内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待收获"\n ><p class="content">这里是页签待收获内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已完成"\n ><p class="content">这里是页签已完成内容</p></nut-tab-panel\n >\n</nut-tab>\n</code></pre><h2>设置 scrollType=“scroll”，标签栏可以在水平方向上滚动</h2><p>切换时会自动将当前标签居中。</p><pre><code class="language-html"><nut-tab :animatedTime="500">\n <nut-tab-panel tab-title="全部"\n ><p class="content">这里是页签全部内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待付款"\n ><p class="content">这里是页签待付款内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待收获"\n ><p class="content">这里是页签待收获内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已完成"\n ><p class="content">这里是页签已完成内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已取消"\n ><p class="content">这里是页签已取消内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待评价"\n ><p class="content">这里是页签待评价内容</p></nut-tab-panel\n >\n</nut-tab>\n</code></pre><h2>设置 slot:header 可以自定义标签</h2><pre><code class="language-html"><nut-tab>\n <nut-tab-panel tab-title="全部">\n <template v-slot:header><nut-icon name="dongdong"></nut-icon></template>\n <p class="content">这里是页签全部内容</p>\n </nut-tab-panel>\n <nut-tab-panel tab-title="待付款"\n ><p class="content">这里是页签待付款内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待收获"\n ><p class="content">这里是页签待收获内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已完成"\n ><p class="content">这里是页签已完成内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="已取消"\n ><p class="content">这里是页签已取消内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="待评价"\n ><p class="content">这里是页签待评价内容</p></nut-tab-panel\n >\n</nut-tab>\n</code></pre><h2>左右 tab 布局</h2><pre><code class="language-html"><nut-tab direction="vertical" :animatedTime="500" :defaultIndex="2">\n <nut-tab-panel tab-title="页签一"\n ><p class="content">这里是页签一内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="页签二"\n ><p class="content">这里是页签二内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="页签三"\n ><p class="content">这里是页签三内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="页签四"\n ><p class="content">这里是页签四内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="页签五"\n ><p class="content">这里是页签五内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="页签六"\n ><p class="content">这里是页签六内容</p></nut-tab-panel\n >\n <nut-tab-panel tab-title="页签七"\n ><p class="content">这里是页签七内容</p></nut-tab-panel\n >\n</nut-tab>\n</code></pre><h2>异步操作</h2>',19),p={class:"language-html"},g=a("<h3>Prop</h3><h3>nut-tab</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>direction</td><td>页签栏的位置，可选值 horizontal/vertical</td><td>String</td><td>horizontal</td></tr><tr><td>default-index</td><td>默认选中的页签栏</td><td>Number</td><td>0</td></tr><tr><td>animated-time</td><td>开启切换标签内容时的转场动画时间</td><td>Number</td><td>0</td></tr><tr><td>no-swiping</td><td>禁止 tab 内容滑动</td><td>Boolean</td><td>false</td></tr><tr><td>scrollType</td><td>页签栏的分布，默认平均分布，设置为"scroll"，有最小宽度，发生滚动</td><td>string</td><td>“default“</td></tr></tbody></table><h3>nut-tab-panel</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>slot:header</td><td>页签 title 的自定义 slot</td><td>vnode</td><td>–</td></tr></tbody></table><h3>Event</h3><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>switch-tab</td><td>切换页签时触发事件</td><td>点击的索引值和触发元素</td></tr></tbody></table>",7),q={setup:a=>(a,q)=>(e(),t("div",u,[o,n("pre",null,[n("code",p,'<nut-tab :animatedTime="500" v-if="editList.length>0">\n <nut-tab-panel :tab-title="item.title" v-for="(item,index) in editList" :key="index">\n <p class="content">这里是页签'+l(a.index)+"内容</p>\n </nut-tab-panel>\n</nut-tab>\n<nut-button type=\"primary\" @click=\"changeList\">改变数据</nut-button>\n</div>\n<script lang=\"ts\">\nimport { ref , reactive,toRefs } from \"vue\";\nimport { createComponent } from '../../utils/create';\nconst { createDemo } = createComponent('tab');\nexport default createDemo({\n setup() {\n const resData = reactive({\n editList:[\n {\n title:'标签一'\n },\n {\n title:'标签二'\n }\n ]\n });\n function changeList(){\n resData.editList.push({\n title:'标签'+resData.editList.length\n })\n }\n return {\n ...toRefs(resData),\n changeList\n };\n }\n});\n<\/script>\n",1)]),g]))};export default q;
|
