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

fix：bug样式修改

Browse Source
This commit is contained in:
fanpeijiang
2022-10-11 23:29:36 +08:00
parent 96b2fea5cf
commit 34922aa6db
10 changed files with 218 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/LeftMenuBar.vue
View File

@@ -1,8 +1,6 @@
<template>
<div class="menu-bar">
<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">
<!-- <img
class="menu-bar-item-img"
@@ -11,18 +9,22 @@
}"
src="../assets/img/down_circle.png"
/> -->
<div class="menu-bar-item-main"
:class="{ 'menu-bar-item-main-active': item.check||index==i }"
@click="parentCheck($event, item,i)">
<div
class="menu-bar-item-main"
:class="{ 'menu-bar-item-main-active': item.check || index == i }"
@click="parentCheck($event, item, i)"
>
<div class="menu-bar-item-main-icon">
<i class="iconfont"
v-html="item.icon"></i>
<i class="iconfont" v-html="item.icon"></i>
</div>
<div class="menu-bar-item-main-text">
<div>{{ item[property] }}</div>
<i v-if="item.children.length > 0"
class="iconfont"
:class="{ 'iconfont-active': item.unfold }">&#xe675;</i>
<i
v-if="item.children.length > 0"
class="iconfont"
:class="{ 'iconfont-active': item.unfold }"
>&#xe675;</i
>
</div>
</div>
<!-- <img
@@ -34,20 +36,23 @@
/> -->
</div>
<div class="menu-bar-has-child">
<div class="menu-bar-item-child"
v-for="(child, childIndex) in item.children"
:key="childIndex">
<div class="menu-bar-item-main"
:style="{
<div
class="menu-bar-item-child"
v-for="(child, childIndex) in item.children"
:key="childIndex"
>
<div
class="menu-bar-item-main"
:style="{
background: child.check ? 'rgba(112, 185, 54, 0.1)' : '#ffffff',
color: child.check ? '#70b936' : '#000000',
height: '51px',
borderRadius: '0'
borderRadius: '0',
}"
@click="childCheck(child,i)">
@click="childCheck(child, i)"
>
<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>
@@ -72,16 +77,15 @@ export default {
default: "name",
},
},
activated () {
activated() {
const route = useRoute();
const path = route.path;
this.menus.forEach((x) => {
x.check = x.path === path;
});
},
setup (props, context) {
const index = ref(null)
setup(props, context) {
const index = ref(null);
const route = useRoute();
let menus = props.list.map((first) => {
const path = route.path;
@@ -97,7 +101,7 @@ export default {
watch(
() => route.path,
() => {
console.log('menus', menus);
console.log("menus", menus);
menus = menus.map((first) => {
const path = route.path;
first.check = path === first.path;
@@ -111,19 +115,22 @@ export default {
}
);
// 点击一级菜单名称
const menuName = ref('')
function domHandle (menus, context) {
const menuName = ref("");
function domHandle(menus, context) {
// 点击一级菜单
const parentCheck = (e, item, i) => {
if(menuName.value !== item.name) {
if (menuName.value !== item.name) {
menusStatusToFalsefather(menus);
}
menuName.value = item.name
menuName.value = item.name;
if (item.disable) return;
if (item.children.length > 0) {
item.unfold = !item.unfold;
const $checkDom = e.currentTarget.parentElement.nextElementSibling;
$checkDom.style.height = item.unfold ? `${$checkDom.scrollHeight}px` : 0;
$checkDom.style.height = item.unfold
? `${$checkDom.scrollHeight}px`
: 0;
$checkDom.style.borderRadius = item.unfold || 0
return;
}
if (item.check) return;
@@ -139,10 +146,11 @@ export default {
context.emit("menuCheck", child);
child.check = true;
index.value = i;
menusStatusToFalsefather(menus);
};
return {
parentCheck,
childCheck
childCheck,
};
}
return {
@@ -154,7 +162,7 @@ export default {
},
};
function menusStatusToFalse (menus) {
function menusStatusToFalse(menus) {
menus.forEach((x) => {
x.check = false;
if (x.children) {
@@ -162,12 +170,12 @@ function menusStatusToFalse (menus) {
}
});
}
function menusStatusToFalsefather (menus) {
function menusStatusToFalsefather(menus) {
menus.forEach((x) => {
x.unfold = false;
var menubar = document.getElementsByClassName('menu-bar-has-child')
var menubar = document.getElementsByClassName("menu-bar-has-child");
for (var key = 0; key < menubar.length; key++) {
menubar[key].style.height = '0px'
menubar[key].style.height = "0px";
}
});
}
@@ -201,13 +209,13 @@ function menusStatusToFalsefather (menus) {
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px 15px 0 0;
border-radius: 8px 8px 0px 0px;
padding-right: 5px;
transition: all 0.3s;
&-active {
color: $yili-default-color;
background: #ffffff;
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}
&-icon {
opacity: 0.9;
@@ -246,11 +254,13 @@ function menusStatusToFalsefather (menus) {
overflow: hidden;
transition: all 0.3s;
height: 0;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 10%);
}
.menu-bar-item:last-child{
.menu-bar-item:last-child {
border-radius: 0px 8px 0px 0px;
}
.menu-bar-item:first-child{
.menu-bar-item:first-child {
border-radius: 8px 0px 0px 0px;
}
}