微客导航 » 文章资讯 » Vue.js组件实现选项卡以及切换特效

Vue.js组件实现选项卡以及切换特效

2023-08-18 18:06:04 152

Vue.js组件实现选项卡以及切换动画特效，供大家参考，具体内容如下

最近在学习Vue，当看梁灏大神写的《Vue.js实战》时看到了关于用组件实现选项卡功能，我也根据课后的练习加上自己的理解重新编写了一下。

组件分为pane.js和tabs.js两个部分，话不多说，直接上代码。









Document





//transiton是Vue自带封装的，不懂的同学可以去找文档，主要是可以实现动画


标签一的内容




标签二的内容




标签三的内容

//tabs.js
Vue.component('tabs',{
template:`



{{item.label}}

关闭/打开

`, 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, }, ]; }, getTabs(){ returnthis.$children.filter(function(item){ returnitem.$options.name==='pane'; }); }, updateNav(){ this.navList=[]; var_this=this; this.getTabs().forEach(function(pane,index){ _this.navList.push({ label:pane.label, name:pane.name||index, bool:pane.closable, }); if(!pane.name)pane.name=index; if(index===0){ if(!_this.currentValue){ _this.currentValue=pane.name||index; } } }); this.updateStatus(); }, updateStatus(){ vartabs=this.getTabs(); var_this=this; tabs.forEach(function(tab){ return(tab.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); }, removePane:function(){ varbool=this.navList[1].bool; console.log(bool); if(bool){ this.navList[1].bool=false; this.currentValue='0'; } if(!bool){ this.navList[1].bool=true; this.currentValue='1'; this.$emit('input','1'); } }, }, watch:{ value:function(val){ this.currentValue=val; }, currentValue:function(){ console.log('demo'); this.updateStatus(); }, }, });

//pane.js
Vue.component('pane',{
name:'pane',
template:`



`,
props:{
name:{
type:String
},
label:{
type:String,
default:''
},
closable:{
type:Boolean,
default:true
}
},

data:function(){
return{
show:true
}
},
methods:{
updateNav(){
this.$parent.updateNav();
}
},
watch:{
label(){
this.updateNav();
}
},
mounted(){
this.updateNav();
}
})

//style.css
.tabs{
font-size:14px;
color:black;
}

.tabs-bar:after{
content:'';
display:block;
width:100%;
height:1px;
position:relative;
background:rgba(78,81,128,0.5);
}

.tabs-tab{
display:inline-block;
padding:4px16px;
margin-right:6px;
color:rgba(0,0,0,0.6);
background:rgba(134,134,131,0.137);
border:1pxsolidrgba(154,214,248,0.856);
cursor:pointer;
position:relative;
}

.tabs-tab-active{
background:rgb(252,251,251);
color:rgba(0,0,0,1);
border-top:1pxsolidrgba(154,214,248,0.856);
border-bottom:1pxsolidwhite;
}

/*.tabs-tab-active:before{
content:'';
display:block;
height:5px;
background:grey;
position:absolute;
top:0;
left:0;
right:0;
}*/

.tabs-content{
position:relative;
left:10px;
top:30px;
padding:8px0;
}

/*可以设置不同的进入和离开动画*/
/*设置持续时间和动画函数*/
.slide-fade-enter-active{
transition:all1.3sease;
}

.slide-fade-leave-active{
transition:all1.8scubic-bezier(1,0.5,0.8,1);
}

.slide-fade-enter,
.slide-fade-leave-to

/*.slide-fade-leave-activeforbelowversion2.1.8*/
{
transform:translateY(30px);
opacity:0;
}

//text.js
varapp=newVue({
el:'#app',
data:{
activeKey:'1',
},
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue.js组件实现选项卡以及切换特效

热门推荐

随机推荐