✨ feat: 新增mini菜单组件，优化自适应宽度计算引入

hookehuyr
Commit 00de2cf24a113a812920e18fabe567dc3ae55fde 00de2cf2 1 parent 225380cd
Showing 7 changed files with 345 additions and 24 deletions
components.d.ts
src/App.vue
src/common/mixin.js
src/components/common/hagerH1.vue
src/components/common/hagerHeader.vue
src/components/hagerMenu.vue
src/views/index.vue
--- a/components.d.ts
View file @00de2cf
+++ b/components.d.ts
View file @00de2cf
@@ -27,6 +27,7 @@ declare module 'vue' {
     HagerHCarousel: typeof import('./src/components/hagerHCarousel.vue')['default']
     HagerHeader: typeof import('./src/components/common/hagerHeader.vue')['default']
     HagerHT: typeof import('./src/components/common/hagerHT.vue')['default']
+     HagerMenu: typeof import('./src/components/hagerMenu.vue')['default']
     HagerMore: typeof import('./src/components/hagerMore.vue')['default']
     HagerT: typeof import('./src/components/common/hagerT.vue')['default']
     HargerMore: typeof import('./src/components/hargerMore.vue')['default']
--- a/src/App.vue
View file @00de2cf
+++ b/src/App.vue
View file @00de2cf
 <!--
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2024-09-30 14:01:41
+  * @LastEditTime: 2024-10-10 13:54:25
  * @FilePath: /hager/src/App.vue
  * @Description: 文件描述
 -->
 <template>
   <div style=" display: flex; flex-direction: column; min-height: 100vh;">
     <hager-header></hager-header>
-     <router-view style="margin-top: 5rem; flex-grow: 1;"></router-view>
+     <router-view :class="['wrapper', is_xs ? 'xs' : '']"></router-view>
     <hager-footer></hager-footer>
   </div>
 </template>
@@ -16,9 +16,11 @@
 <script>
 import hagerHeader from '@/components/common/hagerHeader.vue';
 import hagerFooter from '@/components/common/hagerFooter.vue';
+ import mixin from '@/common/mixin';
 
 export default {
   components: { hagerHeader, hagerFooter },
+   mixins: [mixin.init],
   data () {
     return {
 
@@ -28,6 +30,7 @@ export default {
 
   },
   methods: {
+ 
   }
 }
 </script>
@@ -55,4 +58,12 @@ body {
   top: 50%;
   transform: translateY(-50%);
 }
+ 
+ .wrapper {
+   margin-top: 5rem;
+   flex-grow: 1;
+   &.xs {
+     margin-top: 7rem;
+   }
+ }
 </style>
--- a/src/common/mixin.js
View file @00de2cf
+++ b/src/common/mixin.js
View file @00de2cf
 /*
  * @Date: 2022-07-26 09:49:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2024-09-30 09:44:55
+  * @LastEditTime: 2024-10-10 13:53:54
  * @FilePath: /hager/src/common/mixin.js
  * @Description: 文件描述
  */
 
+ import $ from 'jquery';
+ 
 export default {
   // 初始化设置
   init: {
     mounted () {
       document.title = this.$route.meta.title;
+       // 页面进入时获取当前屏幕宽度
+       this.handleResize();
+       // 监听窗口的 resize 事件
+       window.addEventListener('resize', this.handleResize);
+     },
+     beforeDestroy() {
+       // 在组件销毁前移除监听器，防止内存泄漏
+       window.removeEventListener('resize', this.handleResize);
     },
     data () {
       return {
         top_img_height: '35rem',
+         screenWidth: $('.hagerBox').width(), // 初始化屏幕宽度, xs <768px
       };
     },
+     computed: {
+       is_xs () {
+         return this.screenWidth < 768;
+       }
+     },
     methods: {
+       handleResize() {
+         this.screenWidth = $('.hagerBox').width(); // 更新屏幕宽度
+       },
     },
   },
 };
--- a/src/components/common/hagerH1.vue
View file @00de2cf
+++ b/src/components/common/hagerH1.vue
View file @00de2cf
 <!--
  * @Date: 2024-09-29 10:07:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2024-10-09 15:37:00
+  * @LastEditTime: 2024-10-10 13:54:50
  * @FilePath: /hager/src/components/common/hagerH1.vue
  * @Description: 文件描述
 -->
@@ -36,14 +36,8 @@ export default {
       this.screen_width = val;
     }
   },
-   computed: {
-     is_xs () {
-       return this.screen_width < 768;
-     }
-   },
   data () {
     return {
-       // is_xs: false,
       screen_width: 0,
     }
   },
--- a/src/components/common/hagerHeader.vue
View file @00de2cf
+++ b/src/components/common/hagerHeader.vue
View file @00de2cf
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2024-09-30 17:21:13
+  * @LastEditTime: 2024-10-10 13:55:13
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="hager-header">
     <el-row class="hidden-xs-only" style="background-color: #fff;">
-       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
-       <el-col :sm="20" :md="20" :lg="18" :xl="16" style="position: relative;height: 5rem;">
+       <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
+       <el-col :sm="22" :md="22" :lg="18" :xl="16" style="position: relative;height: 5rem;">
         <el-row>
           <el-col :sm="16" :md="16" :lg="16" :xl="16">
             <div class="nav-wrapper">
@@ -24,22 +24,28 @@
             </div>
           </el-col>
           <el-col :sm="8" :md="8" :lg="8" :xl="8">
-             <div class="nav-right">
+             <el-row class="nav-right">
+               <el-col :sm="18" :md="18" :lg="18" :xl="18">
                 <div class="search">
                   <i class=el-icon-search></i>&nbsp;
-                 <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
+                   <input style="border: 0;background-color: #e3f1f7; width: 100%;" placeholder="搜索" />
                 </div>
+               </el-col>
+               <el-col :sm="3" :md="3" :lg="3" :xl="3">
                 <div @click="goToWeb" class="tooltip">
                   <el-tooltip class="item" effect="dark" content="国际站" placement="bottom">
                     <i class=el-icon-orange style="font-size: 1.25rem;"></i>
                   </el-tooltip>
                 </div>
+               </el-col>
+               <el-col :sm="3" :md="3" :lg="3" :xl="3">
                 <div @click="goToLogin" class="tooltip">
                   <el-tooltip class="item" effect="dark" content="用户登录" placement="bottom">
                     <i class=el-icon-user style="font-size: 1.25rem;"></i>
                   </el-tooltip>
                 </div>
-             </div>
+               </el-col>
+             </el-row>
           </el-col>
         </el-row>
         <el-collapse-transition>
@@ -76,16 +82,40 @@
           </div>
         </el-collapse-transition>
       </el-col>
-       <el-col :sm="2" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
+       <el-col :sm="1" :md="1" :lg="3" :xl="4">&nbsp;</el-col>
     </el-row>
+     <div v-if="is_xs" style="background-color: #fff; padding: 0.5rem 1rem;">
+       <div style="display: flex; align-items: center;justify-content: space-between;">
+         <div @click="openMenu"><i class="el-icon-menu"></i></div>
+         <div>
+           <el-image style="height: 2rem;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
+         </div>
+         <div>
+           <i class=el-icon-orange style="font-size: 1.25rem;"></i>
+           <i class=el-icon-user style="font-size: 1.25rem;"></i>
+         </div>
+       </div>
+       <div style="display: flex; align-items: center; border-radius: 1rem; border: 1px solid #f5f5f5; background-color: #e3f1f7; padding: 0.5rem 1rem; margin-top: 1rem;">
+         <i class=el-icon-search></i>&nbsp;
+         <input style="border: 0;background-color: #e3f1f7;" placeholder="搜索" />
+       </div>
+       <el-collapse-transition>
+         <div v-show="show_menu" class="menu-mini">
+           <hager-menu @close="closeMiniMenu"></hager-menu>
+         </div>
+       </el-collapse-transition>
+     </div>
   </div>
 </template>
 
 <script>
 import mixin from 'common/mixin';
 import { parseQueryString } from '@/utils/tools';
+ import $ from 'jquery';
+ import hagerMenu from '../hagerMenu.vue';
 
 export default {
+   components: { hagerMenu },
   mixins: [mixin.init],
   data () {
     return {
@@ -227,12 +257,13 @@ export default {
       product_info: {},
       is_active: '',
       p_index: 0,
+       show_menu: false,
     }
   },
   mounted () {
     this.product_info = this.product_menu[0]['info'];
     // 修改数据结构显示
-     this.product_info.product = this.splitProductList(this.product_info.product)
+     this.product_info.product = this.splitProductList(this.product_info.product);
   },
   watch: {
     '$route' (to, from) {
@@ -319,6 +350,18 @@ export default {
         path: '/login'
       });
     },
+     openMenu () {
+       this.show_menu = !this.show_menu;
+       if (this.show_menu) {
+         $('body').css('overflow', 'hidden');
+       } else {
+         $('body').css('overflow', 'auto');
+       }
+     },
+     closeMiniMenu () {
+       this.show_menu = false;
+       $('body').css('overflow', 'auto');
+     }
   }
 }
 </script>
@@ -444,5 +487,15 @@ export default {
         }
       }
     }
+ 
+     .menu-mini {
+       position: absolute;
+       top: 6.7rem;
+       right: 0;
+       left: 0;
+       width: 100vw;
+       height: calc(100vh - 6.7rem);
+       background-color: #F7F7F7;
+     }
   }
 </style>
--- a/src/components/hagerMenu.vue 0 → 100644
View file @00de2cf
+++ b/src/components/hagerMenu.vue 0 → 100644
View file @00de2cf
+ <!--
+  * @Date: 2024-10-10 10:37:16
+  * @LastEditors: hookehuyr hookehuyr@gmail.com
+  * @LastEditTime: 2024-10-10 13:58:53
+  * @FilePath: /hager/src/components/hagerMenu.vue
+  * @Description: 文件描述
+ -->
+ <template>
+   <div class="hager-menu-page">
+     <div 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>
+             <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>
+           </div>
+         </div>
+ 
+         <!-- 二级菜单 -->
+         <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="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>
+               </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">
+                 {{ thirdItem.label }}
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+     </div>
+   </div>
+ </template>
+ 
+ <script>
+ import mixin from 'common/mixin';
+ 
+ export default {
+   mixins: [mixin.init],
+   data() {
+     return {
+       // 模拟的树形菜单数据
+       menuData: [
+         {
+           id: 1,
+           label: '配电产品',
+           subItems: [
+             {
+               id: 11,
+               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: 12,
+               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: 2,
+           label: '成套产品',
+           subItems: [
+             {
+               id: 21,
+               label: '塑壳断路器',
+               subItems: [
+                 { id: 211, label: '自动转换开关' },
+                 { id: 212, label: '接触器及热过载继电器' },
+                 // 更多三级菜单项...
+               ],
+             },
+             // 更多二级菜单项...
+           ],
+         },
+         // 更多一级菜单项...
+       ],
+       activeMenu: null, // 当前展开的一级菜单ID
+       activeSubMenu: null, // 当前展开的二级菜单ID
+     };
+   },
+   mounted () {
+ 
+   },
+   methods: {
+     // 切换一级菜单展开状态
+     toggleMenu(menuId) {
+       if (this.activeMenu === menuId) {
+         this.activeMenu = null; // 如果已展开，点击后关闭
+         this.activeSubMenu = null; // 同时关闭二级菜单
+       } else {
+         this.activeMenu = menuId; // 展开新的一级菜单
+         this.activeSubMenu = null; // 同时重置二级菜单
+       }
+     },
+ 
+     // 切换二级菜单展开状态
+     toggleSubMenu(subMenuId) {
+       if (this.activeSubMenu === subMenuId) {
+         this.activeSubMenu = null; // 如果已展开，点击后关闭
+       } else {
+         this.activeSubMenu = subMenuId; // 展开新的二级菜单
+       }
+     },
+ 
+     // 判断一级菜单是否为激活状态
+     isActive(menuId) {
+       return this.activeMenu === menuId;
+     },
+ 
+     // 判断二级菜单是否为激活状态
+     isSubActive(subMenuId) {
+       return this.activeSubMenu === subMenuId;
+     },
+ 
+     goToSub(id) {
+       console.warn(id);
+       this.$emit('close');
+       this.$router.push({
+         path: '/product/index',
+         query: {
+           id: id
+         }
+       })
+     },
+     goToThird(id) {
+       console.warn(id);
+       this.$emit('close');
+       this.$router.push({
+         path: '/product/detail',
+         query: {
+           id: id
+         }
+       })
+     },
+   }
+ }
+ </script>
+ 
+ <style lang="less" scoped>
+ .hager-menu-page {
+   height: 100%;
+   overflow: scroll;
+   .menu {
+     width: 100%;
+   }
+ 
+   .menu-item {
+     cursor: pointer;
+   }
+ 
+   .menu-label {
+     font-weight: bold;
+     padding: 1rem;
+     display: flex;
+     align-items: center;
+     justify-content: space-between;
+     &.active {
+       background-color: #FFF;
+     }
+   }
+ 
+   .submenu {
+     margin-left: 20px;
+   }
+ 
+   .submenu-item {
+     padding: 5px 0;
+     cursor: pointer;
+     .submenu-label {
+       padding: 0.5rem 1rem;
+       padding-bottom: 0;
+       display: flex;
+       align-items: center;
+       justify-content: space-between;
+     }
+   }
+ 
+   .third-menu {
+     margin-left: 20px;
+     // color: #555;
+   }
+ 
+   .third-item {
+     margin: 0.6rem 1rem 0.3rem;
+     cursor: pointer;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     line-clamp: 1;
+     display: -webkit-box;
+     -webkit-line-clamp: 1;
+     -webkit-box-orient: vertical;
+     &:hover {
+       color: #EE6D10;
+       text-decoration: underline;
+     }
+   }
+ }
+ </style>
--- a/src/views/index.vue
View file @00de2cf
+++ b/src/views/index.vue
View file @00de2cf
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
-  * @LastEditTime: 2024-10-09 17:43:10
+  * @LastEditTime: 2024-10-10 13:52:00
  * @FilePath: /hager/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -50,7 +50,6 @@
       <hager-h1 title="解决方案" sub="Solution"></hager-h1>
       <div :class="['hager-solution', is_xs ? 'xs' : '']">
         <div @click="goToSolution(item)" :class="['solution-item', is_xs ? 'xs' : '']" :style="{ backgroundImage: 'url('+item.src+')' }" v-for="(item, index) in solution_list" :key="index"><p>{{ item.title }}</p></div>
-         <!-- <div v-if="!is_xs" class="solution-item other">Other解决方案</div> -->
       </div>
       <div class="xs-control" v-if="is_xs">
         <div><i class="el-icon-arrow-left" @click="prevBtn(solution_list)"></i> <i class="el-icon-arrow-right" @click="nextBtn(solution_list)"></i></div>
@@ -136,7 +135,7 @@ export default {
         content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
         sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
       }],
-       is_xs: false,
+       // is_xs: false,
       screen_width: 0,
       solution_list: [{
         src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
@@ -194,7 +193,7 @@ export default {
       });
     },
     handleScreenWidth(width) {
-       this.is_xs = width < 768;
+       // this.is_xs = width < 768;
       this.screen_width = width;
     },
     prevBtn (list) {
@@ -267,7 +266,7 @@ export default {
     &.xs {
       display: flex;
       overflow: hidden; /* 超出部分隐藏 */
-       width: 100vw; /* 容器宽度适应屏幕 */
+       width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
       gap: 1rem;
     }
     .solution-item {
@@ -367,7 +366,7 @@ export default {
     &.xs {
       display: flex;
       overflow: hidden; /* 超出部分隐藏 */
-       width: 100vw; /* 容器宽度适应屏幕 */
+       width: calc(100vw - 1rem); /* 容器宽度适应屏幕 */
       gap: 1rem;
     }
     .product-item {