Merge pull request '修改多个下拉框共存时，下拉面板不自动关闭问题' (#84) from zq-0707-history into master

Reviewed-on: #84

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>
 
         <!-- 下拉内容 -->
@@ -44,6 +46,7 @@
 </template>
 
 <script>
+import { EventBus } from '@/utils/eventBus'
 export default {
     props: {
         width: {
@@ -89,6 +92,14 @@ export default {
             },
         },
     },
+    created() {
+        // 监听关闭所有下拉框的事件
+        EventBus.$on('close-all-dropdowns', this.closeDropdown)
+    },
+    beforeDestroy() {
+        // 组件销毁移除监听
+        EventBus.$off('close-all-dropdowns', this.closeDropdown)
+    },
     methods: {
         closeDropdown() {
             this.isOpen = false;
@@ -97,6 +108,8 @@ export default {
             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()