溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue如何實現(xiàn)選項卡組件”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何實現(xiàn)選項卡組件”這篇文章吧。
具體內(nèi)容如下
主要功能：點擊不同的選項，顯示不同的內(nèi)容
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
var app=new Vue({
el: "#app",
data: {
activeKey: '1'//被選擇的選項
}
});
});
</script>
</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="js/pane.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tabs.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>pane.js
Vue.component('pane',{
name: 'pane',
template: '\
<div class="pane" v-show="show"> \
<slot></slot> \
</div>',
data: function(){
return {
show: true
}
},
props: {
name: {
type: String
},
label: {
type: String,
default: ''
}
},
methods: {
updateNav() {
this.$parent.updateNav();
}
},
watch: {
label(){
this.updateNav();
}
},
mounted() {
this.updateNav();
}
})tabs.js
Vue.component('tabs',{
template: '\
<div class="tabs">\
<div class="tabs-bar">\
<div \
:class="tabCls(item)" \
v-for="(item,index) in navList" \
@click="handleChange(index)"> \
{{item.label}} \
</div>\
</div> \
<div class="tabs-content"> \
<slot></slot> \
</div> \
</div>',
props: {
value: {
type: [String,Number]
}
},
data: function(){
return {
currentValue: this.value,
navList: []
}
},
methods: {
tabCls: function(item){
return [
'tabs-tab',
{
'tabs-tab-active': item.name===this.currentValue
}
]
},
//遍歷所有為pane的子元素
getTabs(){
return this.$children.filter(function(item){
return item.$options.name==='pane';
});
},
//將pane子元素中l(wèi)abel name放進navList數(shù)組
updateNav() {
this.navList=[];
var _this=this;
this.getTabs().forEach(function(pane,index){
_this.navList.push({
label: pane.label,
name: pane.name ||index
});
if(!pane.name) pane.name=index;
if(index===0){
if(!_this.currentValue){
_this.currentValue=pane.name || index;
}
}
});
this.updateStatus();
},
updateStatus(){
var tabs=this.getTabs();
var _this=this;
//顯示當(dāng)前正在選中的
tabs.forEach(function(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: function(val){
this.currentValue=val;
},
currentValue: function (){
this.updateStatus();
}
}
})以上是“vue如何實現(xiàn)選項卡組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼