溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關如何在Vue.js中使用標簽頁組件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
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中使用標簽頁組件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
