修改多个下拉框共存时，下拉面板不自动关闭问题

src/components/CustomDropdown.vue

@@ -1,11 +1,13 @@
 <template>
-    <div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" :style="{width}">
+    <div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }"
+        :style="{ width }">
         <!-- 触发按钮 -->
         <div class="select-trigger" @click="toggleDropdown">
             <slot name="trigger">
                 {{ selectedItem ? selectedItem[displayKey] : placeholder }}
             </slot>
-            <img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
+            <img class="arrow-icon"
+                :src="isOpen ? require('../assets/dropDown_open.png') : require('../assets/dropDown_expand.png')" alt="">
         </div>
 
         <!-- 下拉内容 -->
@@ -15,7 +17,7 @@
                 <div v-if="options">
                     <div v-for="(item, index) in options" :key="index" class="dropdown-item "
                         :class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)">
-                        <slot name="item" :item="item" >
+                        <slot name="item" :item="item">
                             <div class="flex-between">
                                 <div class="left">
                                     <p class="one">{{ item[displayKey] }}</p>
@@ -44,6 +46,7 @@
 </template>
 
 <script>
+import { EventBus } from '@/utils/eventBus'
 export default {
     props: {
         width: {
@@ -56,7 +59,7 @@ export default {
         },
         options_null: {
             type: Object,
-            default: () => {},
+            default: () => { },
         },
         placeholder: {
             type: String,
@@ -68,7 +71,7 @@ export default {
         },
         valueKey: {
             type: String,
-            default: "value", 
+            default: "value",
         },
         displayKey: {
             type: String,
@@ -89,14 +92,24 @@ export default {
             },
         },
     },
+    created() {
+        // 监听关闭所有下拉框的事件
+        EventBus.$on('close-all-dropdowns', this.closeDropdown)
+    },
+    beforeDestroy() {
+        // 组件销毁移除监听
+        EventBus.$off('close-all-dropdowns', this.closeDropdown)
+    },
     methods: {
         closeDropdown() {
             this.isOpen = false;
         },
         toggleDropdown(e) {
-            if(e) {
+            if (e) {
                 e.stopPropagation();
             }
+            // 先通知所有下拉框关闭
+            EventBus.$emit('close-all-dropdowns')
             this.isOpen = !this.isOpen;
         },
         selectItem(item) {

src/components/SliderMenu.vue

@@ -164,7 +164,7 @@ export default {
 
 .title_text {
   margin-left: 4px;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: bold;
   display: block;
 
@@ -187,7 +187,7 @@ export default {
 
 .el-menu-item {
   padding: 0 22px;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .menu-top {

src/utils/eventBus.js

@@ -0,0 +1,3 @@
+// 在项目中创建 eventBus.js
+import Vue from 'vue'
+export const EventBus = new Vue()