perf: ⚡ 增强 wd-drop-menu 组件，优化遮罩层闪烁 (#974)

Author: yuhengshen

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue

@@ -1,16 +1,18 @@
 <template>
-  <view v-if="showWrapper" :class="`wd-drop-item  ${customClass}`" :style="`z-index: ${zIndex}; ${positionStyle};${customStyle}`">
+  <view
+    v-if="showWrapper"
+    :class="`wd-drop-item  ${customClass}`"
+    :style="`pointer-events: none; z-index: ${zIndex}; ${positionStyle};${customStyle}`"
+  >
     <wd-popup
       v-model="showPop"
       :z-index="zIndex"
       :duration="duration"
       :position="position"
-      :custom-style="`position: absolute; max-height: 80%;${customPopupStyle}`"
+      :custom-style="`position: absolute; pointer-events: auto; max-height: 80%;${customPopupStyle}`"
       :custom-class="customPopupClass"
-      modal-style="position: absolute;"
-      :modal="modal"
+      :modal="false"
       :close-on-click-modal="false"
-      @click-modal="closeOnClickModal && close()"
       @before-enter="beforeEnter"
       @after-enter="afterEnter"
       @before-leave="beforeLeave"
@@ -71,7 +73,6 @@ const showPop = ref<boolean>(false)
 const position = ref<PopupType>()
 const zIndex = ref<number>(12)
 const modal = ref<boolean>(true)
-const closeOnClickModal = ref<boolean>(true)
 const duration = ref<number>(0)
 
 const { parent: dropMenu } = useParent(DROP_MENU_KEY)
@@ -181,7 +182,6 @@ function handleOpen() {
   if (dropMenu) {
     modal.value = Boolean(dropMenu.props.modal)
     duration.value = Number(dropMenu.props.duration)
-    closeOnClickModal.value = Boolean(dropMenu.props.closeOnClickModal)
     position.value = dropMenu.props.direction === 'down' ? 'top' : 'bottom'
   }
   emit('open')

src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue

@@ -1,5 +1,7 @@
 <template>
-  <view :style="customStyle" :class="`wd-drop-menu ${customClass}`" @click.stop="noop" :id="dropMenuId">
+  <view :style="customStyle" :class="`wd-drop-menu ${customClass}`" @click.stop.prevent="noop" :id="dropMenuId">
+    <wd-overlay :show="overlayVisible" :duration="duration" :z-index="12" :custom-style="modalStyle" @click="handleClickOverlay" @touchmove="noop" />
+
     <!-- #ifdef MP-DINGTALK -->
     <view :id="dropMenuId">
       <!-- #endif -->
@@ -34,23 +36,52 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
+import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
 import { closeOther } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { getRect, uuid } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 import { DROP_MENU_KEY, dropMenuProps } from './types'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
 
 const props = defineProps(dropMenuProps)
 const queue = inject<Queue | null>(queueKey, null)
 const dropMenuId = ref<string>(`dropMenuId${uuid()}`)
 const offset = ref<number>(0)
 const windowHeight = ref<number>(0)
+const modalStyle = computed(() => {
+  return props.direction === 'down'
+    ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
+})
 
 const { proxy } = getCurrentInstance() as any
 
 const { linkChildren, children } = useChildren(DROP_MENU_KEY)
 
+const showOverlay = computed(() => {
+  return children.some((child) => child.$.exposed!.getShowPop())
+})
+
+const overlayVisible = ref(false)
+let overlayTimer: ReturnType<typeof setTimeout> | null
+
+// 延迟关闭遮罩层，避免闪烁
+// 小程序中，即使先 fold 再 closeOther 也会有闪烁，使用延迟关闭遮罩层处理
+watch(showOverlay, (newVal) => {
+  if (overlayTimer) {
+    clearTimeout(overlayTimer)
+  }
+  if (newVal) {
+    overlayVisible.value = true
+  } else {
+    overlayTimer = setTimeout(() => {
+      overlayVisible.value = false
+      overlayTimer = null
+    }, 16)
+  }
+})
+
 linkChildren({ props, fold, offset })
 
 watch(
@@ -68,10 +99,7 @@ onBeforeMount(() => {
   windowHeight.value = uni.getSystemInfoSync().windowHeight
 })
 
-function noop(event: Event) {
-  event.preventDefault()
-  event.stopPropagation()
-}
+function noop() {}
 
 function getDisplayTitle(child: any) {
   const { title, modelValue, options, valueKey, labelKey } = child
@@ -114,6 +142,15 @@ function fold(child: any) {
     child.$.exposed!.toggle()
   })
 }
+
+function handleClickOverlay() {
+  if (props.closeOnClickModal) {
+    // 关闭所有打开的菜单项
+    children.forEach((child) => {
+      child.$.exposed!.close()
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>