dropdownMenu增加含筛选则高亮功能

examples/dropdown-menu/dropdownMenu.vue

@@ -2,7 +2,7 @@
   <div>
     <h2>yn-dropdown-menu</h2>
     <div class="box">
-      <yn-dropdown-menu>
+      <yn-dropdown-menu :highLightByFiltered="true">
         <yn-dropdown-menu-item
           v-model="value1"
           :options="option1"
@@ -14,13 +14,23 @@
           :options="option2"
           :titleChangealbe="true"
         ></yn-dropdown-menu-item>
+        <yn-dropdown-menu-item
+          v-model="value5"
+          :mapStatus="mapStatus"
+          :titleChangealbe="true"
+          @change="handleChange"
+          :fixed="true"
+          ref="mapStatus"
+        ></yn-dropdown-menu-item>
         <yn-dropdown-menu-item
           v-model="value3"
           ref="menuItem"
           @beforeEnter="handleBeforeEnter"
         >
           <div>
             <span>这里面是自定义内容</span>
+            <yn-button type="primary" @click="changeData4(true)">设置筛选</yn-button>
+            <yn-button type="primary" @click="changeData4(false)">取消筛选</yn-button>
             <yn-button type="primary" @click="close1">关闭</yn-button>
           </div>
         </yn-dropdown-menu-item>
@@ -152,6 +162,9 @@ export default {
     changeData3(e) {
       this.$refs.closeAble.check(e);
     },
+    changeData4(e) {
+      this.$refs.menuItem.setIsFiltered(e);
+    },
     switchTo(i) {
       this.$refs.switchTo.switchTab(i, true);
     }

src/dropdown-menu-item/dropdown-menu-item.js

@@ -68,6 +68,7 @@ export default defineComponent({
   },
   data() {
     return {
+      isFiltered: false,
       show: false,
       menuStatus: false,
       bodyOverflow: null,
@@ -142,6 +143,23 @@ export default defineComponent({
         return this.checked;
       }
     },
+    setIsFiltered(flag) {
+      this.isFiltered = flag;
+    },
+    getIsFiltered() {
+      if (this.hasOptions()) {
+        if (this.slots().length > 0) {
+          // 自定义内容
+          return this.isFiltered;
+        } else {
+          if (this.currentSelected > -1) {
+            return true;
+          }
+        }
+      } else {
+        return this.checked;
+      }
+    },
     check(selected = false, options = {}) {
       if (this.hasOptions()) {
         if ((selected && !this.show) || (!selected && this.show)) {
@@ -183,6 +201,8 @@ export default defineComponent({
       this.show = false;
     },
     closeTab() {
+      const { slideUp } = this.parent;
+      slideUp && typeof slideUp === "function" && slideUp();
       this.close();
       this.$parent.closeTab();
     },

src/dropdown-menu/dropdown-menu.js

@@ -18,6 +18,10 @@ export default defineComponent({
   mixins: [slotsMixins, provideMixins()],
   components: { Flex, FlexItem, Iconfont },
   props: {
+    highLightByFiltered: {
+      type: Boolean,
+      default: false
+    },
     direction: {
       type: String,
       default: "down",
@@ -139,14 +143,23 @@ export default defineComponent({
             // const active = this.currentTab === key;
             let active = false;
             if (showDirectionIcon) {
-              active = this.currentTab === key;
+              active = this.currentTab === key && this.currentTabStauts;
             } else {
               if (fixed) {
                 active = this.tabs[key];
               } else {
                 active = this.currentTab === key && this.currentTabStauts;
               }
             }
+            if (this.highLightByFiltered && item.componentInstance) {
+              active = active || item.componentInstance.getIsFiltered();
+            } else if (this.highLightByFiltered && !item.componentInstance) {
+              const { defaultSelectedIndex = -1, options = [] } = item.componentOptions.propsData;
+              if (defaultSelectedIndex > -1 && options.length > 0 ) {
+                // 带默认选中项的下拉筛选
+                active = true;
+              }
+            }
             return h(
               genComponentName("flex-item"),
               {