| 1 |
- import{c as t,f as n,t as l,C as a,o as e}from"./vendor.b05df578.js";const u={class:"markdown-body"},o=a('<h1>Tab 选项卡</h1><p>常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式。</p><h2>基础样式</h2><pre><code class="language-html"><nut-tab>\n <nut-tab-panel tab-title="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>\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="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>\n</nut-tab>\n<script lang="ts">\nimport { createComponent } from '../../utils/create';\nconst { createDemo } = createComponent('tab');\nexport 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="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>\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="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>\n</nut-tab>\n</code></pre><h2>标签数量超过 5 个时，标签栏可以在水平方向上滚动</h2><p>切换时会自动将当前标签居中。</p><pre><code class="language-html"><nut-tab :animatedTime="500">\n <nut-tab-panel tab-title="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已取消"><p class="content">这里是页签已取消内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待评价"><p class="content">这里是页签待评价内容</p></nut-tab-panel>\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="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="已取消"><p class="content">这里是页签已取消内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="待评价"><p class="content">这里是页签待评价内容</p></nut-tab-panel>\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="页签一"><p class="content">这里是页签一内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="页签二"><p class="content">这里是页签二内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="页签三"><p class="content">这里是页签三内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="页签四"><p class="content">这里是页签四内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="页签五"><p class="content">这里是页签五内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="页签六"><p class="content">这里是页签六内容</p></nut-tab-panel>\n <nut-tab-panel tab-title="页签七"><p class="content">这里是页签七内容</p></nut-tab-panel>\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></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),b={setup:a=>(a,b)=>(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 b;
|
