vue elementUI使用tabs与导航栏联动

2020-06-14 06:26:42易采站长站整理

navPath: '',
tabsVal: "searchFor",
tabList: [
{
title: '热门搜索',
name: 'searchFor',
disabled: true,
closable: false,
component: searchFor
}
] }
},
methods: {
closeTab(tag) {//关闭tabs
var tabListName = [] for(let i = 0; i < this.tabList.length; i++){
tabListName[i] = this.tabList[i].name;
}
console.log(tabListName)
this.tabList.splice(tabListName.indexOf(tag), 1);
this.tabsVal = "searchFor";
this.$router.push("searchFor");
},
tabclick(val) {
console.log(val)
this.$router.push(val.name);
//点击tabs触发路由跳转,到相应路由
}
},
mounted () {
bus.$on('navPath',(name,val) =>{//处理传过来的值
console.log(name)
var titname;
if(name[name.length -1] == 'searchFor'){
titname = '热门搜索'
}else if(name[name.length -1] == 'Courier1'){
titname = '套课列表'
}else if(name[name.length -1] == 'Courier2'){
titname = '小节列表'
}else if(name[name.length -1] == 'Courier3'){
titname = '套课分享'
}
if (this.tabList.filter(f => f.name == name[name.length -1]) == 0) {
var component = resolve => require([`../page/ContentManagement/${name[0]}/${name[name.length -1]}`], resolve)//合伙人管理
this.tabList.push({
title: titname,
name: name[name.length -1],
disabled: false,
closable: true,
component: component
})
}
this.tabsVal = name[name.length -1] });
}
}
</script>

<style scoped>
#tabs {
position: fixed;
right: calc(2vw - 2px);
top: 100px;
z-index: 5;
width: calc(96% - 189px);
height: 38px;
background: #f0f0f0;
border-bottom: 4px solid #ccc;
border-top: 4px solid #ccc;
padding-left: 10px;
}

.el-tag {
margin: 3px;
}

</style>