Skip to content

Commit

Permalink
fix(Popup): fixed animation being invalid when destroyOnClose is true (
Browse files Browse the repository at this point in the history
…#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>
  • Loading branch information
anlyyao and github-actions[bot] authored Sep 25, 2024
1 parent a3c60c1 commit b0c1a18
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 76 deletions.
42 changes: 2 additions & 40 deletions src/popup/__test__/__snapshots__/demo.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;

Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/popup/demos/base.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
39 changes: 5 additions & 34 deletions src/popup/popup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 },
Expand All @@ -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>(
Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit b0c1a18

Please sign in to comment.