hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：菜单栏修改

Browse Source
This commit is contained in:
fanpeijiang
2022-10-13 21:58:08 +08:00
parent 18915c952f
commit 8d74199a72
1 changed files with 53 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/LeftMenuBar.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="menu-bar"> <div class="menu-bar" v-click-outside="clickOutside">
<div class="menu-bar-item" v-for="(item, i) in menus" :key="i"> <div class="menu-bar-item" v-for="(item, i) in menus" :key="i">
<div class="menu-bar-no-child"> <div class="menu-bar-no-child">
<!-- <img <!-- <img
@@ -41,25 +41,25 @@
v-for="(child, childIndex) in item.children" v-for="(child, childIndex) in item.children"
:key="childIndex" :key="childIndex"
> >
<div class="menu-bar-item-parent"> <div class="menu-bar-item-parent">
<div <div
class="menu-bar-item-main" class="menu-bar-item-main"
:style="{ :style="{
background: child.check ? 'rgba(112, 185, 54, 0.1)' : '#ffffff', background: child.check ? 'rgba(112, 185, 54, 0.1)' : '#ffffff',
color: child.check ? '#70b936' : '#000000', color: child.check ? '#70b936' : '#000000',
height: '32px', height: '32px',
margin: '10px 0', margin: '10px 0',
borderRadius: '0', borderRadius: '0',
}" }"
@click="childCheck(child, i)" @click="childCheck(child, i)"
> >
<div class="menu-bar-item-main-icon"> <div class="menu-bar-item-main-icon">
<i class="iconfont" v-html="child.icon"></i> <i class="iconfont" v-html="child.icon"></i>
</div>
<div class="menu-bar-item-main-text">{{ child[property] }}</div>
</div> </div>
<div class="menu-bar-item-main-text">{{ child[property] }}</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -100,7 +100,7 @@ export default {
}); });
return first; return first;
}); });
const { parentCheck, childCheck } = domHandle(menus, context); const { parentCheck, childCheck, clickOutside } = domHandle(menus, context);
watch( watch(
() => route.path, () => route.path,
() => { () => {
@@ -133,7 +133,7 @@ export default {
$checkDom.style.height = item.unfold $checkDom.style.height = item.unfold
? `${$checkDom.scrollHeight}px` ? `${$checkDom.scrollHeight}px`
: 0; : 0;
$checkDom.style.borderRadius = item.unfold || 0 $checkDom.style.borderRadius = item.unfold || 0;
return; return;
} }
if (item.check) return; if (item.check) return;
@@ -151,9 +151,22 @@ export default {
index.value = i; index.value = i;
menusStatusToFalsefather(menus); menusStatusToFalsefather(menus);
}; };
const clickOutside = () => {
menus.forEach((x) => {
if (x.children && x.unfold) {
x.unfold = false;
const menuChild$ = document.querySelectorAll(".menu-bar-has-child");
for (let index = 0; index < menuChild$.length; index++) {
const element = menuChild$[index];
element.style.height = 0;
}
}
});
};
return { return {
parentCheck, parentCheck,
childCheck, childCheck,
clickOutside,
}; };
} }
return { return {
@@ -161,6 +174,7 @@ export default {
index, index,
parentCheck, parentCheck,
childCheck, childCheck,
clickOutside,
}; };
}, },
}; };
@@ -198,6 +212,9 @@ function menusStatusToFalsefather(menus) {
background: rgba(245, 245, 245, 0.6); background: rgba(245, 245, 245, 0.6);
&-child { &-child {
background-color: #ffffff; background-color: #ffffff;
.menu-bar-item-main-text{
width: 68px;
}
} }
&-img { &-img {
width: 10px; width: 10px;
@@ -280,24 +297,24 @@ function menusStatusToFalsefather(menus) {
position: relative; position: relative;
z-index: 99; z-index: 99;
} }
.menu-bar-item-child{ .menu-bar-item-child {
height: 50px; height: 50px;
display: block; display: block;
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
/* background: #ffffff; */ /* background: #ffffff; */
z-index: 999; z-index: 999;
} }
.menu-bar-item-parent{ .menu-bar-item-parent {
height: 50px; height: 50px;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
left: 0; left: 0;
top: 0; top: 0;
background: #ffffff; background: #ffffff;
opacity: 1; opacity: 1;
z-index: 100; z-index: 100;
height: 50px; height: 50px;
} }
</style> </style>