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