fix(popup): 修复 visible 初始值为 true 时丢失 z-index 问题 (#437)

xiaohe0601 · web-flow · commit 47adc2a17ac8 · 2024-10-12T15:29:18.000+08:00
diff --git a/packages/nutui/components/popup/use-popup.ts b/packages/nutui/components/popup/use-popup.ts
@@ -1,7 +1,14 @@
 import type { SetupContext } from 'vue'
-import { computed, reactive, toRefs, watch } from 'vue'
-import { CLOSE_EVENT, CLOSED_EVENT, OPEN_EVENT, OPENED_EVENT, PREFIX, UPDATE_VISIBLE_EVENT } from '../_constants'
-import { animationName } from '../_constants/types'
+import { computed, onMounted, reactive, toRefs, watch } from 'vue'
+import {
+  animationName,
+  CLOSE_EVENT,
+  CLOSED_EVENT,
+  OPEN_EVENT,
+  OPENED_EVENT,
+  PREFIX,
+  UPDATE_VISIBLE_EVENT,
+} from '../_constants'
 import { useGlobalZIndex } from '../_hooks'
 import { getMainClass, getMainStyle } from '../_utils'
 import type { NutAnimationName } from '../transition'
@@ -91,14 +98,24 @@ export function usePopup(props: PopupProps, emit: SetupContext<PopupEmits>['emit
     state.showSlot = !props.destroyOnClose
   }
 
-  watch(() => props.visible, (value) => {
-    if (value && !state.innerVisible)
+  const applyVisible = (visible: boolean) => {
+    if (visible && !state.innerVisible) {
       open()
+    }
 
-    if (!value && state.innerVisible) {
+    if (!visible && state.innerVisible) {
       state.innerVisible = false
+
       emit(CLOSE_EVENT)
     }
+  }
+
+  watch(() => props.visible, (value) => {
+    applyVisible(value)
+  })
+
+  onMounted(() => {
+    applyVisible(props.visible)
   })
 
   return {
