| 1 |
- import{e as s,o as a,G as n}from"./vendor.9cc7b6f2.js";const t={class:"markdown-body"},l=[n('<h1>Tab 选项卡</h1><p>常用于平级区域大块内容的的收纳和展现，支持内嵌标签形式和渲染循环数据形式。</p><blockquote><p>注意，由于小程序端依赖的 swiper 组件存在兼容性问题，因此在小程序端暂时只支持基础的 tab 切换功能，待 swiper 组件修复后，开放所有功能。</p></blockquote><h2>安装</h2><pre><code class="language-js"><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> { Tab, TabPanel, Swiper, SwiperItem } <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> { Tab, TabPanel, Swiper, SwiperItem } <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(Tab);\napp.use(TabPanel);\napp.use(Swiper);\napp.use(SwiperItem);\n</code></pre><h2>基础样式，默认 tab-title 宽度均分相等</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"全部"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待付款"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待收获"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待收获内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已完成"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已完成内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n</code></pre><h2>默认显示 tab：</h2><p>defaultIndex 设置默认显示 tab switchTab 监听切换 tab 返回事件</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span> <span class="hljs-attr">:defaultIndex</span>=<span class="hljs-string">"1"</span> @<span class="hljs-attr">switchTab</span>=<span class="hljs-string">"switchTab"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"全部"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待付款"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待收获"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待收获内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已完成"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已完成内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ts"</span>></span><span class="javascript">\n <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <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">switchTab</span>(<span class="hljs-params">activeInddex: number</span>) </span>{\n <span class="hljs-built_in">console</span>.log(activeInddex);\n }\n <span class="hljs-keyword">return</span> {\n switchTab\n };\n }\n };\n</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>\n</code></pre><h2>animatedTime 开启切换标签内容时的转场动画时间</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span> <span class="hljs-attr">:animatedTime</span>=<span class="hljs-string">"500"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"全部"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待付款"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待收获"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待收获内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已完成"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已完成内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n</code></pre><h2>禁止 tab 内容滑动</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span> <span class="hljs-attr">:no-swiping</span>=<span class="hljs-string">"true"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"全部"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待付款"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待收获"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待收获内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已完成"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已完成内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n</code></pre><h2>设置 scrollType=“scroll”，标签栏可以在水平方向上滚动</h2><p>切换时会自动将当前标签居中。</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span> <span class="hljs-attr">:animatedTime</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">scrollType</span>=<span class="hljs-string">"scroll"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"全部"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待付款"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待收获"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待收获内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已完成"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已完成内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已取消"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已取消内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待评价"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待评价内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n</code></pre><h2>设置 slot:header 可以自定义标签</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"全部"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:header</span>></span><span class="hljs-tag"><<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dongdong"</span>></span><span class="hljs-tag"></<span class="hljs-name">nut-icon</span>></span><span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签全部内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待付款"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待付款内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待收获"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待收获内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已完成"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已完成内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"已取消"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签已取消内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"待评价"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签待评价内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n</code></pre><h2>左右 tab 布局</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span>\n <span class="hljs-attr">direction</span>=<span class="hljs-string">"vertical"</span>\n <span class="hljs-attr">:animated-time</span>=<span class="hljs-string">"500"</span>\n <span class="hljs-attr">:default-index</span>=<span class="hljs-string">"2"</span>\n <span class="hljs-attr">scrollType</span>=<span class="hljs-string">"scroll"</span>\n <span class="hljs-attr">icon-type</span>=<span class="hljs-string">"half"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"页签一"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签一内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"页签二"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签二内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"页签三"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签三内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"页签四"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签四内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"页签五"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签五内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"页签六"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签六内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">tab-title</span>=<span class="hljs-string">"页签七"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签七内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n</code></pre><h2>异步操作</h2><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-tab</span> <span class="hljs-attr">:animatedTime</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"editList.length>0"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-tab-panel</span> <span class="hljs-attr">:tab-title</span>=<span class="hljs-string">"item.title"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item,index) in editList"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"index"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content-tab"</span>></span>这里是页签{{index}}内容<span class="hljs-tag"></<span class="hljs-name">p</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">nut-tab-panel</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-tab</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"changeList"</span>></span>改变数据<span class="hljs-tag"></<span class="hljs-name">nut-button</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ts"</span>></span><span class="javascript">\n<span class="hljs-keyword">import</span> { ref , reactive,toRefs } <span class="hljs-keyword">from</span> <span class="hljs-string">"vue"</span>;\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n <span class="hljs-keyword">const</span> resData = reactive({\n <span class="hljs-attr">editList</span>:[\n {\n <span class="hljs-attr">title</span>:<span class="hljs-string">'标签一'</span>\n },\n {\n <span class="hljs-attr">title</span>:<span class="hljs-string">'标签二'</span>\n }\n ]\n });\n <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">changeList</span>(<span class="hljs-params"></span>)</span>{\n resData.editList.push({\n <span class="hljs-attr">title</span>:<span class="hljs-string">'标签'</span>+resData.editList.length\n })\n }\n <span class="hljs-keyword">return</span> {\n ...toRefs(resData),\n changeList\n };\n }\n}\n</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>\n</code></pre><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>scroll-type</td><td>页签栏的分布，默认平均分布，设置为"scroll"，有最小宽度，发生滚动</td><td>string</td><td>“default“</td></tr><tr><td>icon-type</td><td>页签底部选中的红色样式，当为 half 的时候，显示半圆的红色 icon，默认为 all：红色横线，用来兼容不同的视觉规范</td><td>String</td><td>all</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>',30)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};
|
