<p><code></p> <p>使用<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>实现Tab功能。</p> <p>创建一个tab.vue文件,内容如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;tab_box&quot;> <!--这里是tab的每一项--></p> <div v-for=&quot;item in tabs&quot; :key=&quot;'tabItem' + item.id&quot; :class=&quot;['tab_item', {'active_tab':currentTab === item.id}]&quot; @click=&quot;changeTab(item.id)&quot;> {{item.label}} </div> </p></div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { currentTab: '' // 用于记录tab当前所在项的id } }, props: ['tabs'], // 需要父组件传入 methods: { changeTab (id) { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.currentTab = id <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$emit('changed', id) // 点击tab时触发changed方法,由父组件处理 } }, mounted: function () { <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.currentTab = this.tabs[0].id // 默认下划线在第一项 } } </script></p> <style> .tab_box{ width:100%; display:table; } .tab_item{ display:table-cell; padding: 3px 8px 4px 8px; /*如果想修改tab内的字体颜色和tab样式,在这里修改*/ } .active_tab { /*这是下划线样式,可以根据需要修改*/ border-bottom: 2px solid grey; } </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab_box"</span>&gt;</span> <span class="hljs-comment">&lt;!--这里是tab的每一项--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in tabs"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"'tabItem' + item.id"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"['tab_item', {'active_tab':currentTab === item.id}]"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"changeTab(item.id)"</span>&gt;</span> {{item.label}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">currentTab</span>: <span class="hljs-string">''</span> <span class="hljs-comment">// 用于记录tab当前所在项的id</span> } }, <span class="hljs-attr">props</span>: [<span class="hljs-string">'tabs'</span>], <span class="hljs-comment">// 需要父组件传入</span> methods: { changeTab (id) { <span class="hljs-keyword">this</span>.currentTab = id <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'changed'</span>, id) <span class="hljs-comment">// 点击tab时触发changed方法,由父组件处理</span> } }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.currentTab = <span class="hljs-keyword">this</span>.tabs[<span class="hljs-number">0</span>].id <span class="hljs-comment">// 默认下划线在第一项</span> } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.tab_box</span>{ <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>; <span class="hljs-attribute">display</span>:table; } <span class="hljs-selector-class">.tab_item</span>{ <span class="hljs-attribute">display</span>:table-cell; <span class="hljs-attribute">padding</span>: <span class="hljs-number">3px</span> <span class="hljs-number">8px</span> <span class="hljs-number">4px</span> <span class="hljs-number">8px</span>; <span class="hljs-comment">/*如果想修改tab内的字体颜色和tab样式,在这里修改*/</span> } <span class="hljs-selector-class">.active_tab</span> { <span class="hljs-comment">/*这是下划线样式,可以根据需要修改*/</span> <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">2px</span> solid grey; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>在父组件调用:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<tab @changed=&quot;change&quot; :tabs=&quot;tabs&quot;></tab>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code style="word-break: break-word; white-space: initial;">&lt;tab @changed=<span class="hljs-string">"change"</span> <span class="hljs-symbol">:tabs=<span class="hljs-string">"tabs"</span>&gt;&lt;/tab&gt;</span></code></pre> <p>其中change方法和tabs需要父组件中定义<br />tabs的格式如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="tabs: [ {'id': 't1', 'label': 'TAB1'}, {'id': 't2', 'label': 'TAB2'}, {'id': 't3', 'label': 'TAB3'}, {'id': 't4', 'label': 'TAB4'}, {'id': 't5', 'label': 'TAB5'} ]," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">tabs:</span> [ {<span class="hljs-string">'id'</span>: <span class="hljs-string">'t1'</span>, <span class="hljs-string">'label'</span>: <span class="hljs-string">'TAB1'</span>}, {<span class="hljs-string">'id'</span>: <span class="hljs-string">'t2'</span>, <span class="hljs-string">'label'</span>: <span class="hljs-string">'TAB2'</span>}, {<span class="hljs-string">'id'</span>: <span class="hljs-string">'t3'</span>, <span class="hljs-string">'label'</span>: <span class="hljs-string">'TAB3'</span>}, {<span class="hljs-string">'id'</span>: <span class="hljs-string">'t4'</span>, <span class="hljs-string">'label'</span>: <span class="hljs-string">'TAB4'</span>}, {<span class="hljs-string">'id'</span>: <span class="hljs-string">'t5'</span>, <span class="hljs-string">'label'</span>: <span class="hljs-string">'TAB5'</span>} ],</code></pre> <p>为确保正确渲染,id需要保证唯一性。label为tab显示的内容。</p> <p>change方法如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="change (data) { //这里写切换tab之后你需要做的事,data为切换后的tabId this.message = 'this is ' + data + ', do whatever you want' }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>change (<span class="hljs-keyword">data</span>) { <span class="hljs-comment">//这里写切换tab之后你需要做的事,data为切换后的tabId</span> <span class="hljs-keyword">this</span>.message = <span class="hljs-string">'this is '</span> + <span class="hljs-keyword">data</span> + <span class="hljs-string">', do whatever you want'</span> }</code></pre> <p>最终效果如下:<br /><span class="img-wrap"><img data-src="/img/bVbry8C" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26384.html