✨ feat(产品中心菜单): 点击菜单框外部会关闭菜单

 /*
 /*
  * @Date: 2022-07-26 09:49:54
  * @Date: 2022-07-26 09:49:54
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-11 11:29:08
+ * @LastEditTime: 2024-10-12 11:51:56
  * @FilePath: /hager/src/common/mixin.js
  * @FilePath: /hager/src/common/mixin.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -43,5 +43,21 @@ export default {
         }
         }
       },
       },
     },
     },
+    directives: {
+      clickOutside: {
+        bind(el, binding) {
+          el.clickOutsideEvent = function(event) {
+            // 检测点击是否在指定元素外部
+            if (!(el === event.target || el.contains(event.target))) {
+              binding.value(); // 触发绑定的方法
+            }
+          };
+          document.addEventListener('click', el.clickOutsideEvent);
+        },
+        unbind(el) {
+          document.removeEventListener('click', el.clickOutsideEvent);
+        }
+      }
+    },
   },
   },
 };
 };

 <!--
 <!--
  * @Date: 2024-09-26 13:42:11
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-10 13:55:13
+ * @LastEditTime: 2024-10-12 11:52:42
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -49,7 +49,7 @@
           </el-col>
           </el-col>
         </el-row>
         </el-row>
         <el-collapse-transition>
         <el-collapse-transition>
-          <div v-show="show" class="product-center">
+          <div v-show="show" class="product-center" v-click-outside="closeMenu">
             <div style="display: flex; width: 100%;">
             <div style="display: flex; width: 100%;">
               <div class="product-left-wrapper">
               <div class="product-left-wrapper">
                 <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
                 <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
@@ -361,7 +361,7 @@ export default {
     closeMiniMenu () {
     closeMiniMenu () {
       this.show_menu = false;
       this.show_menu = false;
       $('body').css('overflow', 'auto');
       $('body').css('overflow', 'auto');
-    }
+    },
   }
   }
 }
 }
 </script>
 </script>