fix(ui/menu): support ssr

varletjs · Jan 6, 2022 · c50e26f · c50e26f
1 parent eaf4d68
commit c50e26f
Showing 1 changed file with 24 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/menu/Menu.tsx b/packages/varlet-ui/src/menu/Menu.tsx
@@ -1,4 +1,15 @@
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted, Transition, Teleport, nextTick } from 'vue'
+import {
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onUnmounted,
+  Transition,
+  Teleport,
+  nextTick,
+  TeleportProps,
+} from 'vue'
 import { props } from './props'
 import { getLeft, getTop, toSizeUnit } from '../utils/elements'
 import { useZIndex } from '../context/zIndex'
@@ -15,6 +26,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const host: Ref<null | HTMLElement> = ref(null)
     const menu: Ref<null | HTMLElement> = ref(null)
+    const to: Ref<TeleportProps['to']> = ref()
     const top: Ref<number> = ref(0)
     const left: Ref<number> = ref(0)
     const { zIndex } = useZIndex(() => props.show, 1)
@@ -89,7 +101,16 @@ export default defineComponent({
       }
     )
 
+    watch(
+      () => props.teleport,
+      (newValue) => {
+        to.value = newValue
+      }
+    )
+
     onMounted(() => {
+      // Synchronously transfer the state to the mount hook to support server-side rendering to prevent hydration errors
+      to.value = props.teleport
       resize()
 
       document.addEventListener('click', handleMenuClose)
@@ -107,8 +128,8 @@ export default defineComponent({
       <div class="var-menu" ref={host} onClick={handleClick}>
         {slots.default?.()}
 
-        {props.teleport ? (
-          <Teleport to={props.teleport} disabled={disabled.value}>
+        {to.value ? (
+          <Teleport to={to.value} disabled={disabled.value}>
             {renderTransition()}
           </Teleport>
         ) : (