如何在Vue.js中使用標簽頁組件-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關如何在Vue.js中使用標簽頁組件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)主營江城網站建設的網絡公司,主營網站建設方案,APP應用開發(fā),江城h5微信平臺小程序開發(fā)搭建,江城網站營銷推廣歡迎江城等地區(qū)企業(yè)咨詢

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>標簽頁組件</title>
 <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
 <div id="app" v-cloak>
 <tabs v-model="activeKey">
 <pane label="標簽一" name="1">
 標簽一的內容
 </pane>
 <pane label="標簽二" name="2">
 標簽二的內容
 </pane>
 <pane label="標簽三" name="3">
 標簽三的內容
 </pane>
 </tabs>
 </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="pane.js"></script>
 <script src="tabs.js"></script>
 <script type="text/javascript">
 var app = new Vue({
 el: '#app',
 data: {
 activeKey: '1'
 }
 });
 </script>
</body>
</html>

樣式表 style.css

[v-clock]{
 display: none;
}
.tabs{
 font-size: 14px;
 color: #657180
}
.tabs-bar:after{
 content: '';
 display: block;
 width: 100%;
 height: 1px;
 background: #d7dde4;
 margin-top: -1px;
}
.tabs-tab{
 display: inline-block;
 padding: 4px 16px;
 margin-right: 6px;
 background: #fff;
 border: 1px solid #d7dde4;
 cursor: pointer;
 position: relative;
}
.tabs-tab-active{
 color: #ee99ff;
 border-top: 1px solid #3399ff;
 border-bottom: 1px solid #fff;
}
.tabs-tab-active:befor{
 content: '';
 display: block;
 height: 1px;
 background: #3399ff;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}
.tabs-content{
 padding: 8px 0;
}

標簽頁外層的組件tabs tabs.js

Vue.component('tabs',{
 template: '\
 <div class="tabs">\
 <div class="tabs-bar">\
 <!--標簽頁標題，這里要用v-for-->\
 <div \
 :class="tabCls(item)"\
 v-for="(item, index) in navList"\
 @click="handleChange(index)">\
 {{item.label}}\
 </div>\
 </div>\
 <div class="tabs-content">\
 <!--這里的slot就是嵌套的pane-->\
 <slot></slot>\
 </div>\
 </div>',
 props: {
 value: {
 type: [String, Number]
 }
 },
 data: function () {
 return {
 //用于渲染tabs的標題
 currentValue: this.value,
 navList: []
 }
 },
 methods: {
 tabCls(item){
 return [
 'tabs-tab',
 {
 'tabs-tab-active': item.name === this.currentValue
 }
 ]
 },
 getTabs(){
 //通過遍歷子組件，得到所有的pane組件
 return this.$children.filter(function (item) {
 return item.$options.name === 'pane';
 });
 },
 updateNav(){
 this.navList = [];
 //設置對this的引用，在function回調里，this的指向的并不是Vue實例
 var _this = this;

 this.getTabs().forEach((pane, index) => {
 _this.navList.push({
 label: pane.label,
 name: pane.name || index
 });
 //如果沒有給pane設置name，默認設置它的索引
 if(!pane.name)
 pane.name = index;
 //設置當前選中的tab的索引
 if(index === 0){
 if(!_this.currentValue){
 _this.currentValue = pane.name || index;
 }
 }
 });
 this.updateStatus();
 },
 updateStatus(){
 var tabs = this.getTabs();
 var _this = this;
 //顯示當前選中的tab對應的pane組件，隱藏沒有選中的
 tabs.forEach(tab => {
 return tab.show = tab.name === _this.currentValue;
 });
 },
 handleChange: function (index) {
 var nav = this.navList[index];
 var name = nav.name;
 this.currentValue = name;
 this.$emit('input', name);
 this.$emit('on-click', name);
 }
 },
 watch: {
 value: val => {
 this.currentValue = val;
 },
 currentValue: function () {
 this.updateStatus();
 }
 }
});

標簽頁嵌套的組件pane pane.js

Vue.component('pane',{
 name: 'pane',
 template: '\
 <div class="pane" v-show="show">\
 <slot></slot>\
 </div>',
 data: function () {
 return {
 show: true
 }
 },
 props: {
 name: String
 },
 label: {
 type: String,
 default: ''
 },
 methods: {
 updateNav: function () {
 this.$parent.updateNav();
 }
 },
 watch: {
 label: function () {
 this.updateNav();
 }
 },
 mounted: function () {
 this.updateNav();
 }
});

以上就是如何在Vue.js中使用標簽頁組件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁名稱：如何在Vue.js中使用標簽頁組件-創(chuàng)新互聯(lián)
轉載來于：http://muchs.cn/article22/phejc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供手機網站建設、小程序開發(fā)、企業(yè)網站制作、外貿建站、網站策劃、軟件開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設