Commit a0a88a88 authored by 纪泽龙's avatar 纪泽龙

调整导航

parent a62ec5d2
...@@ -8,8 +8,10 @@ ...@@ -8,8 +8,10 @@
<!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" --> <!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" -->
<el-menu-item <el-menu-item
:index="item.path" :index="item.path"
:key="index" :key="index + `${item.meta.title}`"
v-if="index < visibleNumber" v-if="index < visibleNumber"
:class="{ isActive: menuAcitve == item.meta.title }"
@click="menuClick($event, item)"
> >
<!-- 导航栏左侧图标 --> <!-- 导航栏左侧图标 -->
<!-- <svg-icon :icon-class="item.meta.icon" /> --> <!-- <svg-icon :icon-class="item.meta.icon" /> -->
...@@ -32,6 +34,7 @@ ...@@ -32,6 +34,7 @@
:index="item.path" :index="item.path"
:key="index" :key="index"
v-if="index >= visibleNumber" v-if="index >= visibleNumber"
@click="menuClick($event, item)"
><svg-icon :icon-class="item.meta.icon" /> ><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item {{ item.meta.title }}</el-menu-item
> >
...@@ -55,6 +58,8 @@ export default { ...@@ -55,6 +58,8 @@ export default {
// 当前激活菜单的 index // 当前激活菜单的 index
currentIndex: undefined, currentIndex: undefined,
myRouter: [], myRouter: [],
// 因为更多菜单前面的最后一个总是出问题,所以调整一下
menuAcitve: null,
}; };
}, },
computed: { computed: {
...@@ -134,10 +139,14 @@ export default { ...@@ -134,10 +139,14 @@ export default {
this.setVisibleNumber(); this.setVisibleNumber();
}, },
methods: { methods: {
menuClick(e, item) {
this.menuAcitve = item.meta.title;
},
// 根据宽度计算设置显示栏数 // 根据宽度计算设置显示栏数
setVisibleNumber() { setVisibleNumber() {
const width = document.body.getBoundingClientRect().width / 3; const width = document.body.getBoundingClientRect().width / 3;
this.visibleNumber = parseInt(width / 85); this.visibleNumber = parseInt(width / 90);
console.log(this.visibleNumber);
}, },
// 菜单选择事件 // 菜单选择事件
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
...@@ -154,7 +163,7 @@ export default { ...@@ -154,7 +163,7 @@ export default {
path = this.activeRoutes(key); path = this.activeRoutes(key);
// console.log("path",this.$store.state.permission.topbarRouters); // console.log("path",this.$store.state.permission.topbarRouters);
console.log(this.$route.path); console.log(this.$route.path);
if (this.$route.path != path[0].path) { if (this.$route.path != path[0].path) {
if (path[0].path) { if (path[0].path) {
this.$router.push(path[0].path); this.$router.push(path[0].path);
...@@ -252,7 +261,8 @@ export default { ...@@ -252,7 +261,8 @@ export default {
} }
.navTopBar:focus, .navTopBar:focus,
.navTopBar.is-active { .navTopBar.is-active,
.isActive {
outline: none; outline: none;
background-image: url("../../assets/logo/item-background.png"); background-image: url("../../assets/logo/item-background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment