Vue elementUI使用tabs与导航栏联动
不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件。
·
不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件
在slider.vue中点击路由后,把当前选择的路由@select使用bus传出去
<template>
<div id='v_slider'>
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
<el-menu :default-openeds='["200","3","4","5","6","2020082116471091274"]' router class="el-menu-vertical-demo" id="QWE" :unique-opened='isunique' :collapse="isCollapse" @select="handleSelect">
<el-submenu v-for='first in menuData' :index='first.menu_id' :key='first.menu_id'>
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">{{first.menu_name}}</span>
</template>
<template v-if="isSubmenu">
<el-submenu v-for='second in first.children' :index='second.menu_url' :key='second.menu_id'>
<span slot="title">{{second.menu_name}}</span>
<el-menu-item v-for='third in second.children' :index='third.menu_url' :key='third.menu_id'>{{third.menu_name}}</el-menu-item>
</el-submenu>
</template>
<template v-else>
<el-menu-item v-for='second in first.children' :index='second.menu_url' :key='second.menu_id'>{{second.menu_name}}</el-menu-item>
</template>
</el-submenu>
</el-menu>
<div class="box"><i :class="iconClass" @click="hide"></i></div>
</div>
</template>
<script>
export default {
name:'v_slider',
data(){
return {
iconClass:'el-icon-d-arrow-left',
isSHow:true,
isCollapse: true,
isunique: true,
isSubmenu:false,
menuData: [],
treeMenu:[]
}
},
mounted() {
this.InitSecondMenu();
},
methods: {
InitSecondMenu(){
var self=this;
var Enumerable = require('linq');
var data=JSON.parse(sessionStorage.getItem('menuData'));
var menuData_cache=JSON.parse(sessionStorage.getItem('menuData'));
if (!(typeof menuData_cache == "string" && JSON.parse(menuData_cache) != null)) {
this.$http({
method: 'GET',
url: this.api+'/api/Yw_Sys_Menu/GetMainMenu?usrId='+sessionStorage.getItem("currentUserId")
}).then(res => {
if(res.status==200){
sessionStorage.setItem("menuData",JSON.stringify(res.data.data));
data=JSON.parse(sessionStorage.getItem('menuData'));
var first=Enumerable.from(data).where("p=>p.menu_level==1").toArray();//一级菜单
var second=Enumerable.from(data).where("p=>p.menu_level==2").toArray();//二级菜单
var third=Enumerable.from(data).where("p=>p.menu_level==3").toArray();//三级菜单
third.forEach(second => {
second.children=Enumerable.from(data).where("p=>p.menu_pid=="+second.menu_id +"&p.menu_type==1").orderBy("p=>p.menu_order").toArray();//将三级菜单挂载在二级菜单下
});
second.forEach(first => {
first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id +"&p.menu_type==1").orderBy("p=>p.menu_order").toArray();//将二级菜单挂载在一级菜单下
});
first.forEach(first => {
first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id +"&p.menu_type==1").orderBy("p=>p.menu_order").toArray();//将一级菜单挂载在this.menuData下
});
self.treeMenu=first;
// self.menuData=Enumerable.from(first).where("p=>p.menu_id=='200'").toArray();
self.isCollapse=false;
sessionStorage.setItem("treeMenuData",JSON.stringify(self.treeMenu));
self.showMenu({param:["200"]});//200代表第一个运维管理菜单
}
}).catch(error => {
console.log(error);
});
}else{
var first=Enumerable.from(data).where("p=>p.menu_level==1").toArray();//一级菜单
var second=Enumerable.from(data).where("p=>p.menu_level==2").toArray();//二级菜单
var third=Enumerable.from(data).where("p=>p.menu_level==3").toArray();//三级菜单
third.forEach(second => {
second.children=Enumerable.from(data).where("p=>p.menu_pid=="+second.menu_id).orderBy("p=>p.menu_order").toArray();//将三级菜单挂载在二级菜单下
});
second.forEach(first => {
first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id).orderBy("p=>p.menu_order").toArray();//将二级菜单挂载在一级菜单下
});
first.forEach(first => {
first.children=Enumerable.from(data).where("p=>p.menu_pid=="+first.menu_id).orderBy("p=>p.menu_order").toArray();//将一级菜单挂载在this.menuData下
});
this.treeMenu=first;
this.menuData=Enumerable.from(first).where("p=>p.menu_id==1").toArray();
this.isCollapse=false;
this.showMenu({param:["200"]});//200代表第一个运维管理菜单
}
},
showMenu(obj){
var self=this;
var Enumerable = require('linq');
this.menuData=Enumerable.from(this.treeMenu).where("p=>p.menu_id=="+obj.param[0]).orderBy("x=>x.menu_order").toArray();
this.menuData.forEach(item=>{
item.children.forEach(i=>{
if(i.children!=null&&i.children.length>0){
self.isSubmenu=true;return;
}else{
self.isSubmenu=false;return;
}
})
})
this.isCollapse=false;
},
handleSelect(key, keyPath) {//子组件的方法名,随便取
this.$router.options.routes.forEach(item => {//遍历全局所有路由。并找到当前路由信息并跳转该路由。
if(item.path==key){
this.$emit('parentFn',{param:item.name});
return;
}
});
},
hide(){
this.isSHow=!this.isSHow;
var aside=document.querySelector('.el-aside');
if(!this.isSHow){
this.iconClass='el-icon-d-arrow-right';
aside.style.width="20px";
this.isCollapse=true;
}else{
this.iconClass='el-icon-d-arrow-left';
aside.style.width="250px";
this.isCollapse=false;
}
}
},
components: {
}
}
</script>
<style scoped>
#v_slider{position: relative;}
/* #slider{height: cacl(100% - 60px);background: #ccc;} */
.el-menu-vertical-demo:not(.el-menu--collapse) {box-sizing:border-box;width: 249px;min-height: 400px;}
.el-menu {text-align: left;}
.el-menu-item{padding-left: 80px !important;}
.box:hover i{background: #fff;color:lightskyblue;}
.box{font-size:20px;color:darkslateblue;background:#fff;position:absolute;right: 0px;top: calc(50vh - 70px);z-index: 9;}
</style>
将slider和tabs包在index里面,通过index传递兄弟组件通信。
或者eventBus也可以。
import bus from '../common/bus';
methods: {
addTab(key,keyPath) {
console.log(key,keyPath)
bus.$emit('navPath',keyPath)
}
},
<template>
<div id="v_Index">
<el-container style="height: 100%;">
<el-header>
<rate-header @parentFn="openSlider"></rate-header>
</el-header>
<el-container>
<el-aside width="auto" style="border-right: 1px solid #dcd8d8;max-width:250px;">
<rate-aside @parentFn="appendToTabs" ref="slider"></rate-aside>
</el-aside>
<el-main>
<rateContentmain ref="tab"></rateContentmain>
</el-main>
<!-- <el-aside width="250px" style="border-right: 1px solid #dcd8d8;">
</el-aside> -->
</el-container>
</el-container>
</div>
</template>
<script>
import rateHeader from './layout/header'
import rateAside from './layout/slider'
import rateContentmain from './layout/contentMain'
import Oidc from "oidc-client";
var config = {
authority: "http://localhost:5000",
client_id: "js",
redirect_uri: "http://localhost:5003/CallBack",
response_type: "id_token token",
scope: "openid profile api1",
post_logout_redirect_uri: "http://localhost:5003/"
};
var mgr = new Oidc.UserManager(config);
export default {
name: 'v_Index',
data() {
return {
};
},
beforeCreate(){
},
mounted() {
var that=this;
mgr.getUser().then(function(user) {
if (user) {
// this.res = ("User logged in", user.profile);
that.res = ("User logged in", user.profile);
} else {
that.res = ("User not logged in");
}
});
},
methods: {
openSlider(obj){
this.$refs.slider.showMenu(obj);
},
appendToTabs({param}){
//console.log('参数',param)
this.$refs.tab.addTab({param});
},
},
components: {
rateHeader,rateAside,rateContentmain
}
}
</script>
<style scoped>
#v_Index{height: 100%;}
.el-main{padding: 0;}
section:nth-child(1){height: 100%;}
section:nth-child(2){height: 100%}
.el-header, .el-footer {background-color:#062d91;color: #fff;line-height: 60px;}
.el-aside,.el-main {background-color: #fff;text-align: center;height: 100%;}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{width: 7px;height: 7px;background-color: #F5F5F5;}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{border-radius: 10px;box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);background-color: #c8c8c8;}
</style>
在tabs.vue中接收
<template>
<div id="v_Tabs">
<el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="linkRouter">
<el-tab-pane
v-for="(item) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
:closable="item.close"
>
<!-- 首页高德地图组件 -->
<!-- <Map style="border-radius: 1px;margin: -15px 10px 0px 10px;" ></Map> -->
<component @jump='addTab' :is="item.component"></component>
<!-- 二级路由 显示home路由下的子路由视图 如果路由名称和当前页面的名称不对应则不显示。-->
<router-view @jump='addTab' @closeCurrentPage='removeTab'></router-view>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import map from '../pages/common/map'
export default {
name: 'v_Tabs',
data() {
return {
editableTabsValue: '1',
editableTabs: [{
title: '首页',
name: '1',
content: '',
component:map,
}],
tabIndex: 1
}
},
mounted(){
//console.log(this.$route);//路由信息
},
computed: {
},
methods: {
jump(obj){
this.$router.push({ path: '/index/ywUnit' });
},
addTab(targetName) {
if(targetName.isjump){
this.$router.push({ path: targetName.path});
}
var exist = false;
for (var i = 0; i < this.editableTabs.length; i++) {
if (targetName.param === this.editableTabs[i].title) {
exist = true;
// this.editableTabsValue=i;
this.editableTabsValue=this.editableTabs[i].name;
return;
}
}
let newTabName = ++this.tabIndex + '';
this.editableTabs.push({
title: targetName.param,
name: newTabName,
content: targetName.param,
editable:'',
close:'closable'
});
this.editableTabsValue = newTabName;
},
removeTab(targetName) {
if(typeof targetName =="string" && targetName.length>=4){}
this.editableTabs.forEach(item => {
if(item.title===targetName){targetName=item.name;}
});
let tabs = this.editableTabs;
var editTabTile="";
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
editTabTile=nextTab.title;
activeName = nextTab.name;
}
}
});
}
// this.$router.go(-1);
this.$router.options.routes.forEach(item => {//遍历全局所有路由。并找到当前路由信息并跳转该路由。
// this.$alert(item.name);
// this.$alert(editTabTile);
if(item.name==editTabTile){
this.$router.push({ path: item.path });
return;
}else{
// this.$router.push({ path: "http://localhost:8080/#/sys_usr" });
}
});
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
},
//跳转路由并且设置当前活跃的标签
linkRouter(currentTab) {
this.$router.options.routes.forEach(item => {//遍历全局所有路由。并找到当前路由信息并跳转该路由。
if(item.name==currentTab.label){
this.$router.push({ path: item.path });
return;
}
});
// this.editableTabsValue = currentTab.name;
}
},
components:{
}
}
</script>
<style scoped>
/* #v_Tabs[data-v-bdda1ea4] {
width: 84% !important;
float: right;
position: absolute;
top: 0px;
right: 0px;
} */
/* .el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close:nth-child(1) span{
display: none !important;
} */
.el-tabs__item .el-icon-close:before {
-webkit-transform: scale(.9);
transform: scale(.9);
display: none !important;
}
/* .el-tabs__item.is-closable {
display: none !important;
} */
#v_Tabs{height: 100%;}
#v_Tabs .el-tabs{height: 100%;}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)