fix: 🐛 修复 Dropdown 组件点击已展开项时无法关闭的问题

Moonofweisheng · Jan 28, 2024 · 3846590 · 3846590
1 parent d3d80b2
commit 3846590
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
@@ -50,7 +50,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import { pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
 import type { PopupType } from '../wd-popup/type'
@@ -140,6 +140,9 @@ function setShowPop(show: boolean) {
   showPop.value = show
 }
 
+function getShowPop() {
+  return showPop.value
+}
 // 模拟单选操作 默认根据 value 选中操作
 function choose(index: number) {
   if (props.disabled) return
@@ -154,13 +157,15 @@ function choose(index: number) {
 }
 // 外部关闭弹出框
 function close() {
-  showPop.value = false
-  dropMenu && dropMenu.fold()
+  if (showPop.value) {
+    showPop.value = false
+    dropMenu && dropMenu.fold()
+  }
 }
 
 const positionStyle = computed(() => {
   let style: string = ''
-  if (showPop.value && dropMenu) {
+  if (showWrapper.value && dropMenu) {
     style =
       dropMenu.props.direction === 'down'
         ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
@@ -197,7 +202,7 @@ function handleClose() {
   emit('close')
 }
 
-defineExpose({ setShowPop, open, close })
+defineExpose({ setShowPop, getShowPop, open, close })
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
@@ -104,6 +104,7 @@ function getDisplayTitle(child: any) {
 
 function toggle(child: any) {
   // 点击当前 menu, 关闭其他 menu
+
   if (child && !child.disabled) {
     if (queue && queue.closeOther) {
       queue.closeOther(child)
@@ -133,14 +134,20 @@ function fold(child?: any) {
     } else {
       offset.value = windowHeight.value - top
     }
-    // 选中当前关掉其他的
-    children.forEach((item) => {
-      if (child.$.uid === item.$.uid) {
-        item.$.exposed!.open()
-      } else {
-        item.$.exposed!.setShowPop(false)
-      }
-    })
+    const showPop = child.$.exposed!.getShowPop()
+    if (showPop) {
+      child.$.exposed!.setShowPop(false)
+      currentUid.value = null
+    } else {
+      // 选中当前关掉其他的
+      children.forEach((item) => {
+        if (child.$.uid === item.$.uid) {
+          item.$.exposed!.open()
+        } else {
+          item.$.exposed!.setShowPop(false)
+        }
+      })
+    }
   })
 }
 </script>