如何在Vue.js中使用标签页组件

tangjin

作者

本篇文章给大家分享的是有关如何在Vue.js中使用标签页组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

index.html

如何在Vue.js中使用标签页组件

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>标签页组件</title>
<linkrel="stylesheet"type="text/css"href="style.css">
</head>
<body>
<divid="app"v-cloak>
<tabsv-model="activeKey">
<panelabel="标签一"name="1">
标签一的内容
</pane>
<panelabel="标签二"name="2">
标签二的内容
</pane>
<panelabel="标签三"name="3">
标签三的内容
</pane>
</tabs>
</div>
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
<scriptsrc="pane.js"></script>
<scriptsrc="tabs.js"></script>
<scripttype="text/javascript">
varapp=newVue({
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:4px16px;
margin-right:6px;
background:#fff;
border:1pxsolid#d7dde4;
cursor:pointer;
position:relative;
}
.tabs-tab-active{
color:#ee99ff;
border-top:1pxsolid#3399ff;
border-bottom:1pxsolid#fff;
}
.tabs-tab-active:befor{
content:'';
display:block;
height:1px;
background:#3399ff;
position:absolute;
top:0;
left:0;
right:0;
}
.tabs-content{
padding:8px0;
}

标签页外层的组件tabs tabs.js

Vue.component('tabs',{
template:'\
<divclass="tabs">\
<divclass="tabs-bar">\
<!--标签页标题，这里要用v-for-->\
<div\
:class="tabCls(item)"\
v-for="(item,index)innavList"\
@click="handleChange(index)">\
{{item.label}}\
</div>\
</div>\
<divclass="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组件
returnthis.$children.filter(function(item){
returnitem.$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(){
vartabs=this.getTabs();
var_this=this;
//显示当前选中的tab对应的pane组件，隐藏没有选中的
tabs.forEach(tab=>{
returntab.show=tab.name===_this.currentValue;
});
},
handleChange:function(index){
varnav=this.navList[index];
varname=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:'\
<divclass="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中使用标签页组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-03-24 01:22:34

vue.js