mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-06 05:09:00 +08:00
6503e55277
* refactor(utils-v2): migrate utils * refactor(utils-v2): migrate utils * refactor(utils-v2): migrate utils * refactor(utils): remove * refactor(utils): rename * refactor(utils): move EVENT_CODE to constants * refactor: remove generic
59 lines
1.3 KiB
TypeScript
59 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'
|
|
|
|
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,
|
|
}
|
|
}
|