mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
bbd16a08e9
* refactor(hooks): remove use-css-var * refactor(hooks): remove use-events * refactor(hooks): remove use-migrating * refactor(hooks): remove use-transition * refactor(hooks): named export useAttrs * refactor(hooks): named export useFocus * refactor(hooks): refactor useFormItem * refactor(hooks): refactor useGlobalConfig * refactor(hooks): refactor useLocale * refactor(hooks): refactor useLockscreen * refactor(hooks): refactor useModal * refactor(hooks): refactor useModelToggle * refactor(hooks): refactor usePreventGlobal * refactor(hooks): refactor useRestoreActive * refactor(hooks): refactor useTeleport * refactor(hooks): refactor useThrottleRender * refactor(hooks): refactor useTimeout * refactor(hooks): refactor useTransitionFallthrogh
62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import { h, ref, Teleport, onUnmounted } from 'vue'
|
|
import { NOOP } from '@vue/shared'
|
|
import { isClient } from '@vueuse/core'
|
|
import {
|
|
createGlobalNode,
|
|
removeGlobalNode,
|
|
} from '@element-plus/utils/global-nodes'
|
|
|
|
import type { VNode, Ref } from 'vue'
|
|
|
|
export const useTeleport = (
|
|
contentRenderer: () => VNode,
|
|
appendToBody: Ref<boolean>
|
|
) => {
|
|
const isTeleportVisible = ref(false)
|
|
|
|
if (!isClient) {
|
|
return {
|
|
isTeleportVisible,
|
|
showTeleport: NOOP,
|
|
hideTeleport: NOOP,
|
|
renderTeleport: NOOP,
|
|
}
|
|
}
|
|
|
|
let $el: HTMLElement | null = null
|
|
|
|
const showTeleport = () => {
|
|
isTeleportVisible.value = true
|
|
// this allows the delayed showing strategy since the the content itself could be enterable
|
|
// e.g. el-popper
|
|
if ($el !== null) return
|
|
|
|
$el = createGlobalNode()
|
|
}
|
|
|
|
const hideTeleport = () => {
|
|
isTeleportVisible.value = false
|
|
if ($el !== null) {
|
|
removeGlobalNode($el)
|
|
$el = null
|
|
}
|
|
}
|
|
|
|
const renderTeleport = () => {
|
|
return appendToBody.value !== true
|
|
? contentRenderer()
|
|
: isTeleportVisible.value
|
|
? [h(Teleport, { to: $el }, contentRenderer())]
|
|
: undefined
|
|
}
|
|
|
|
onUnmounted(hideTeleport)
|
|
|
|
return {
|
|
isTeleportVisible,
|
|
showTeleport,
|
|
hideTeleport,
|
|
renderTeleport,
|
|
}
|
|
}
|