diff --git a/examples/dropdown-menu/dropdownMenu.vue b/examples/dropdown-menu/dropdownMenu.vue index 1981e32..8d25d68 100644 --- a/examples/dropdown-menu/dropdownMenu.vue +++ b/examples/dropdown-menu/dropdownMenu.vue @@ -2,7 +2,7 @@

yn-dropdown-menu

- + +
这里面是自定义内容 + 设置筛选 + 取消筛选 关闭
@@ -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); } diff --git a/src/dropdown-menu-item/dropdown-menu-item.js b/src/dropdown-menu-item/dropdown-menu-item.js index f9b012d..c9a5aa0 100644 --- a/src/dropdown-menu-item/dropdown-menu-item.js +++ b/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(); }, diff --git a/src/dropdown-menu/dropdown-menu.js b/src/dropdown-menu/dropdown-menu.js index 1d70be1..7762ada 100644 --- a/src/dropdown-menu/dropdown-menu.js +++ b/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,7 +143,7 @@ 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]; @@ -147,6 +151,15 @@ export default defineComponent({ 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"), {