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

…#1600)

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

* test: update snapshots

* chore: update common

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/popup/__test__/__snapshots__/demo.test.jsx.snap

@@ -92,26 +92,7 @@ exports[`Popup > Popup baseVue demo works fine 1`] = `
     <!---->
   </button>
   
-  <teleport-stub
-    data-v-70969ba8=""
-    disabled="false"
-    to="[object HTMLBodyElement]"
-  >
-    <div
-      class="t-overlay"
-      style="z-index: 1000; transition-duration: 300ms; display: none;"
-    >
-      <!---->
-    </div>
-    <div
-      class="t-popup t-popup--top"
-      style="padding: 100px; display: none;"
-    >
-      <!--v-if-->
-      
-      
-    </div>
-  </teleport-stub>
+  <!--v-if-->
 </div>
 `;
 
@@ -296,26 +277,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           <!---->
         </button>
         
-        <teleport-stub
-          data-v-70969ba8=""
-          disabled="false"
-          to="[object HTMLBodyElement]"
-        >
-          <div
-            class="t-overlay"
-            style="z-index: 1000; transition-duration: 300ms; display: none;"
-          >
-            <!---->
-          </div>
-          <div
-            class="t-popup t-popup--top"
-            style="padding: 100px; display: none;"
-          >
-            <!--v-if-->
-            
-            
-          </div>
-        </teleport-stub>
+        <!--v-if-->
       </div>
       
     </div>

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>
 

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,