Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
43170a48 1 parent 9b51d9e1

菜单自适应显示优化

Inline Side-by-side
Showing 2 changed files with 138 additions and 71 deletions
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-21 12:59:17
* @LastEditTime: 2024-10-21 13:42:16
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -448,6 +448,7 @@ export default {
},
openMenu () {
this.show_menu = !this.show_menu;
// TAG: 解决body滚动被禁止
if (this.show_menu) {
$('body').css('overflow', 'hidden');
} else {
......
<!--
* @Date: 2024-10-10 10:37:16
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-10 13:58:53
* @LastEditTime: 2024-10-21 13:37:46
* @FilePath: /hager/src/components/hagerMenu.vue
* @Description: 文件描述
-->
<template>
<div class="hager-menu-page">
<div class="menu">
<div class="menu-wrapper">
<div class="menu-title" @click="toggleTop()">产品中心</div>
<div>
<i
v-if="isToggle"
class="el-icon-arrow-up"
style="font-size: 1.25rem; color: #F56400;"
@click="toggleTop()"
></i>
<i @click="toggleTop()" v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></i>
</div>
</div>
<div v-if="isToggle" class="menu">
<div v-for="(item, index) in menuData" :key="item.id" class="menu-item">
<!-- 一级菜单 -->
<div @click="toggleMenu(item.id)" :class="['menu-label', activeMenu === item.id ? 'active' : '']">
<div
@click="toggleMenu(item.id)"
:class="['menu-label', activeMenu === item.id ? 'active' : '']"
>
<div>
<i class="el-icon-s-cooperation"></i>
{{ item.label }}
</div>
<div>
<i v-if="isActive(item.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i>
<i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i>
<i
v-if="isActive(item.id)"
class="el-icon-arrow-up"
style="font-size: 1.25rem; color: #F56400;"
></i>
<i v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></i>
</div>
</div>
......@@ -25,16 +44,25 @@
<div v-if="isActive(item.id)" class="submenu">
<div v-for="subItem in item.subItems" :key="subItem.id" class="submenu-item">
<div class="submenu-label">
<div @click="goToSub(subItem.id)"> {{ subItem.label }} </div>
<div @click="goToSub(subItem.id)">{{ subItem.label }}</div>
<div @click="toggleSubMenu(subItem.id)">
<i v-if="isSubActive(subItem.id)" class="el-icon-arrow-up" style="font-size: 1.25rem;"></i>
<i v-else class="el-icon-arrow-down" style="font-size: 1.25rem;"></i>
<i
v-if="isSubActive(subItem.id)"
class="el-icon-arrow-up"
style="font-size: 1.25rem; color: #F56400;"
></i>
<i v-else class="el-icon-arrow-down" style="font-size: 1.25rem; color: #F56400;"></i>
</div>
</div>
<!-- 三级菜单 -->
<div v-if="isSubActive(subItem.id)" class="third-menu">
<div @click="goToThird(thirdItem.id)" v-for="thirdItem in subItem.subItems" :key="thirdItem.id" class="third-item">
<div
@click="goToThird(thirdItem.id)"
v-for="thirdItem in subItem.subItems"
:key="thirdItem.id"
class="third-item"
>
{{ thirdItem.label }}
</div>
</div>
......@@ -42,91 +70,104 @@
</div>
</div>
</div>
<div class="menu-wrapper" @click="goTo('/solution/index')">
<div class="menu-title">解决方案</div>
</div>
<div class="menu-wrapper" @click="goTo('/news')">
<div class="menu-title">新闻中心</div>
</div>
<div class="menu-wrapper" @click="goTo('/recruit')">
<div class="menu-title">招聘信息</div>
</div>
<div class="menu-wrapper" @click="goTo('/about')">
<div class="menu-title">关于海格</div>
</div>
<div class="menu-wrapper" @click="goTo('/concat')">
<div class="menu-title">联系我们</div>
</div>
<div class="menu-wrapper" @click="goTo('/')">
<div class="menu-title">首页</div>
</div>
</div>
</template>
<script>
import mixin from 'common/mixin';
import mixin from "common/mixin";
export default {
mixins: [mixin.init],
data() {
return {
// 模拟的树形菜单数据
menuData: [
{
id: 1,
label: '配电产品',
label: "配电产品",
subItems: [
{
id: 11,
label: '空气断路器1',
label: "空气断路器1",
subItems: [
{ id: 111, label: 'HW系列空气断路器' },
{ id: 112, label: 'HW+系列空气断路器' },
{ id: 113, label: 'HW系列空气断路器' },
{ id: 114, label: 'HW+系列空气断路器' },
{ id: 115, label: 'HW系列空气断路器' },
{ id: 116, label: 'HW+系列空气断路器' },
{ id: 117, label: 'HW系列空气断路器' },
{ id: 118, label: 'HW+系列空气断路器' },
{ id: 119, label: 'HW系列空气断路器' },
{ id: 1121, label: 'HW+系列空气断路器' },
{ id: 1117, label: 'HW系列空气断路器' },
{ id: 1127, label: 'HW+系列空气断路器' },
{ id: 1137, label: 'HW系列空气断路器' },
{ id: 1147, label: 'HW+系列空气断路器' },
{ id: 1157, label: 'HW系列空气断路器' },
{ id: 1167, label: 'HW+系列空气断路器' },
{ id: 7117, label: 'HW系列空气断路器' },
{ id: 7118, label: 'HW+系列空气断路器' },
{ id: 7119, label: 'HW系列空气断路器' },
{ id: 71121, label: 'HW+系列空气断路器' },
{ id: 111, label: "HW系列空气断路器" },
{ id: 112, label: "HW+系列空气断路器" },
{ id: 113, label: "HW系列空气断路器" },
{ id: 114, label: "HW+系列空气断路器" },
{ id: 115, label: "HW系列空气断路器" },
{ id: 116, label: "HW+系列空气断路器" },
{ id: 117, label: "HW系列空气断路器" },
{ id: 118, label: "HW+系列空气断路器" },
{ id: 119, label: "HW系列空气断路器" },
{ id: 1121, label: "HW+系列空气断路器" },
{ id: 1117, label: "HW系列空气断路器" },
{ id: 1127, label: "HW+系列空气断路器" },
{ id: 1137, label: "HW系列空气断路器" },
{ id: 1147, label: "HW+系列空气断路器" },
{ id: 1157, label: "HW系列空气断路器" },
{ id: 1167, label: "HW+系列空气断路器" },
{ id: 7117, label: "HW系列空气断路器" },
{ id: 7118, label: "HW+系列空气断路器" },
{ id: 7119, label: "HW系列空气断路器" },
{ id: 71121, label: "HW+系列空气断路器" },
],
},
{
id: 12,
label: '空气断路器2',
label: "空气断路器2",
subItems: [
{ id: 111, label: 'HW系列空气断路器' },
{ id: 112, label: 'HW+系列空气断路器' },
{ id: 113, label: 'HW系列空气断路器' },
{ id: 114, label: 'HW+系列空气断路器' },
{ id: 115, label: 'HW系列空气断路器' },
{ id: 116, label: 'HW+系列空气断路器' },
{ id: 117, label: 'HW系列空气断路器' },
{ id: 118, label: 'HW+系列空气断路器' },
{ id: 119, label: 'HW系列空气断路器' },
{ id: 1121, label: 'HW+系列空气断路器' },
{ id: 111, label: "HW系列空气断路器" },
{ id: 112, label: "HW+系列空气断路器" },
{ id: 113, label: "HW系列空气断路器" },
{ id: 114, label: "HW+系列空气断路器" },
{ id: 115, label: "HW系列空气断路器" },
{ id: 116, label: "HW+系列空气断路器" },
{ id: 117, label: "HW系列空气断路器" },
{ id: 118, label: "HW+系列空气断路器" },
{ id: 119, label: "HW系列空气断路器" },
{ id: 1121, label: "HW+系列空气断路器" },
],
},
],
},
{
id: 2,
label: '成套产品',
label: "成套产品",
subItems: [
{
id: 21,
label: '塑壳断路器',
label: "塑壳断路器",
subItems: [
{ id: 211, label: '自动转换开关' },
{ id: 212, label: '接触器及热过载继电器' },
// 更多三级菜单项...
{ id: 211, label: "自动转换开关" },
{ id: 212, label: "接触器及热过载继电器" },
],
},
// 更多二级菜单项...
],
},
// 更多一级菜单项...
],
isToggle: false,
activeMenu: null, // 当前展开的一级菜单ID
activeSubMenu: null, // 当前展开的二级菜单ID
};
},
mounted () {
},
mounted() {},
methods: {
// 切换一级菜单展开状态
toggleMenu(menuId) {
......@@ -160,32 +201,56 @@ export default {
goToSub(id) {
console.warn(id);
this.$emit('close');
this.$emit("close");
this.$router.push({
path: '/product/index',
path: "/product/index",
query: {
id: id
}
})
id: id,
},
});
},
goToThird(id) {
console.warn(id);
this.$emit('close');
this.$emit("close");
this.$router.push({
path: '/product/detail',
path: "/product/detail",
query: {
id: id
}
})
id: id,
},
});
},
}
}
//
toggleTop(v) {
this.isToggle = !this.isToggle;
},
goTo (path) { // 跳转页面
this.$emit("close");
if (this.$route.path !== path) { // 不能重复点击当前页面
this.$router.push({
path,
});
}
},
},
};
</script>
<style lang="less" scoped>
.hager-menu-page {
height: 100%;
overflow: scroll;
background-color: #FFF;
.menu-wrapper {
display: flex;
align-items: center;
padding: 1rem;
justify-content: space-between;
// padding-bottom: 0;
border-bottom: 1px solid #F9F9F9;
.menu-title {
color: @secondary-color;
}
}
.menu {
width: 100%;
}
......@@ -195,18 +260,19 @@ export default {
}
.menu-label {
font-weight: bold;
// font-weight: bold;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
&.active {
background-color: #FFF;
background-color: #fff;
}
}
.submenu {
margin-left: 20px;
padding-left: 20px;
background-color: #F7F7F7;
}
.submenu-item {
......@@ -236,7 +302,7 @@ export default {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
&:hover {
color: #EE6D10;
color: #ee6d10;
text-decoration: underline;
}
}
......