fix(Popup): fixed animation being invalid when destroyOnClose is true

Tencent · Sep 25, 2024 · 4f7281c · 4f7281c
1 parent a3c60c1
commit 4f7281c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 35 deletions.
diff --git a/src/popup/demos/base.vue b/src/popup/demos/base.vue
@@ -3,7 +3,7 @@
     <t-button v-for="p in placement" :key="p" block variant="outline" theme="primary" size="large" @click="onClick(p)">
       {{ p.text }}
     </t-button>
-    <t-popup v-model="visible" :placement="currentPlacement" style="padding: 100px" />
+    <t-popup v-model="visible" :placement="currentPlacement" destroy-on-close style="padding: 100px" />
   </div>
 </template>
 

diff --git a/src/popup/popup.vue b/src/popup/popup.vue
@@ -4,6 +4,7 @@
     <transition :name="contentTransitionName" @after-enter="afterEnter" @after-leave="afterLeave">
       <div
         v-show="innerVisible"
+        ref="popupRef"
         :class="[popupClass, $attrs.class, contentClasses]"
         :style="rootStyles"
         v-bind="$attrs"
@@ -28,11 +29,10 @@ import { TdPopupProps } from './type';
 import { useDefault, TNode, renderTNode, isBrowser } from '../shared';
 import { getAttach } from '../shared/dom';
 import { usePrefixClass } from '../hooks/useClass';
+import { useLockScroll } from '../hooks/useLockScroll';
 
 const { prefix } = config;
 
-let lockTimes = 0;
-
 export default defineComponent({
   name: `${prefix}-popup`,
   components: { TNode, TOverlay },
@@ -42,7 +42,7 @@ export default defineComponent({
   setup(props, context) {
     const popupClass = usePrefixClass('popup');
 
-    const bodyLockClass = `${popupClass.value}-overflow-hidden`;
+    const popupRef = ref<HTMLElement>();
 
     const currentInstance = getCurrentInstance();
     const [currentVisible, setVisible] = useDefault<TdPopupProps['visible'], TdPopupProps>(
@@ -56,9 +56,8 @@ export default defineComponent({
 
     // 因为开启 destroyOnClose，会影响 transition 的动画，因此需要前后设置 visible
     watch(currentVisible, (v) => {
-      wrapperVisible.value = v;
-
       if (v) {
+        wrapperVisible.value = v;
         if (props.destroyOnClose) {
           nextTick(() => {
             innerVisible.value = v;
@@ -132,37 +131,9 @@ export default defineComponent({
       },
     );
 
-    const lock = () => {
-      if (!lockTimes && isBrowser) {
-        document.body.classList.add(bodyLockClass);
-      }
-
-      lockTimes++;
-    };
-
-    const unlock = () => {
-      if (lockTimes) {
-        lockTimes--;
+    useLockScroll(popupRef, () => wrapperVisible.value && props.preventScrollThrough, popupClass.value);
 
-        if (!lockTimes && isBrowser) {
-          document.body.classList.remove(bodyLockClass);
-        }
-      }
-    };
-
-    const shouldLock = computed(() => wrapperVisible.value && props.preventScrollThrough);
-
-    watch(
-      () => shouldLock.value,
-      (value) => {
-        value ? lock() : unlock();
-      },
-    );
-    onUnmounted(() => {
-      unlock();
-    });
     return {
-      name,
       to,
       popupClass,
       wrapperVisible,