Skip to content

Commit

Permalink
feat(poup): mounted后才显示,避免ssr下mismatch
Browse files Browse the repository at this point in the history
  • Loading branch information
novlan1 committed Nov 27, 2024
1 parent ed37554 commit 2b6a605
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions src/popup/popup.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { computed, watch, defineComponent, h, ref, nextTick, Teleport, Transition } from 'vue';
import { computed, watch, defineComponent, h, Fragment, ref, nextTick, Teleport, Transition, onMounted } from 'vue';
import { CloseIcon } from 'tdesign-icons-vue-next';

import popupProps from './props';
Expand Down Expand Up @@ -37,6 +37,11 @@ export default defineComponent({

const wrapperVisible = ref(currentVisible.value);
const innerVisible = ref(currentVisible.value);
const mounted = ref(false);

onMounted(() => {
mounted.value = true;
});

// 因为开启 destroyOnClose,会影响 transition 的动画,因此需要前后设置 visible
watch(currentVisible, (v) => {
Expand Down Expand Up @@ -143,11 +148,16 @@ export default defineComponent({
</Transition>
);

const renderPopupContent = (
const renderPopupContent = mounted.value ? (
<Teleport to={teleportElement.value} disabled={!teleportElement.value}>
{renderOverlayContent}
{renderContent}
</Teleport>
) : (
<Fragment>
{renderOverlayContent}
{renderContent}
</Fragment>
);

return (!props.destroyOnClose || wrapperVisible.value) && renderPopupContent;
Expand Down

0 comments on commit 2b6a605

Please sign in to comment.