adtec-core-package 2.3.8 → 2.3.9

package/src/components/tooltip/src/tooltip.ts

@@ -1,518 +1,518 @@
-//@ts-ignore
-import {
-  h,
-  ref,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  computed,
-  reactive,
-  watch,
-  type PropType,
-  type VNode
-} from 'vue'
-
-// 定义属性类型
-interface VxeTooltipPropTypes {
-  modelValue?: boolean
-  content?: string | number
-  trigger?: 'hover' | 'click'
-  theme?: 'dark' | 'light'
-  enterDelay?: number
-  leaveDelay?: number
-  isArrow?: boolean
-  enterable?: boolean
-}
-
-// 定义响应式数据类型
-interface TooltipReactData {
-  target: HTMLElement | null
-  isUpdate: boolean
-  visible: boolean
-  tipContent: string | number
-  tipActive: boolean
-  tipTarget: HTMLElement | null
-  tipZindex: number
-  tipStore: {
-    style: Record<string, string | number>
-    placement: string
-    arrowStyle: Record<string, string | number> | null
-  }
-}
-
-// 定义内部数据类型
-interface TooltipInternalData {
-  showDelayTip?: Function
-}
-
-// 定义组件方法类型
-interface TooltipMethods {
-  open: (target?: HTMLElement | null, content?: string | number) => void
-  close: () => void
-  updatePlacement: () => Promise<void>
-  isActived: () => boolean
-  setActived: (active: boolean) => void
-}
-
-// 简单的防抖函数
-function debounce(func: Function, wait: number) {
-  let timeout: number | null = null
-  return function (this: any, ...args: any[]) {
-    if (timeout) {
-      clearTimeout(timeout)
-    }
-    timeout = window.setTimeout(() => {
-      func.apply(this, args)
-    }, wait) as any
-  }
-}
-
-// 检查值是否为空
-function isNull(value: any): boolean {
-  return value === null || value === undefined
-}
-
-// 检查值是否相等
-function eqNull(value: any): boolean {
-  return value === null || value === undefined || value === ''
-}
-
-export default {
-  name: 'VxeTooltip',
-  props: {
-    modelValue: Boolean,
-    content: [String, Number],
-    trigger: {
-      type: String as PropType<'hover' | 'click'>,
-      default: 'hover'
-    },
-    theme: {
-      type: String as PropType<'dark' | 'light'>,
-      default: 'dark'
-    },
-    isArrow: {
-      type: Boolean,
-      default: true
-    },
-    enterable: {
-      type: Boolean,
-      default: true
-    },
-    enterDelay: {
-      type: Number,
-      default: 0
-    },
-    leaveDelay: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props: VxeTooltipPropTypes, { slots, emit }: any) {
-    // 响应式数据
-    const reactData = reactive<TooltipReactData>({
-      target: null,
-      isUpdate: false,
-      visible: false,
-      tipContent: '',
-      tipActive: false,
-      tipTarget: null,
-      tipZindex: 0,
-      tipStore: {
-        style: {},
-        placement: '',
-        arrowStyle: {}
-      }
-    })
-
-    // 内部数据
-    const internalData: TooltipInternalData = {}
-
-    // DOM 引用
-    const refElem = ref<HTMLDivElement>()
-    const contentWrapperfElem = ref<HTMLDivElement>()
-
-    // 获取 DOM 位置信息
-    const getDomNode = () => {
-      return {
-        scrollTop: window.scrollY || document.documentElement.scrollTop,
-        scrollLeft: window.scrollX || document.documentElement.scrollLeft,
-        visibleWidth: document.documentElement.clientWidth
-      }
-    }
-
-    // 获取元素绝对位置
-    const getAbsolutePos = (element: HTMLElement) => {
-      const rect = element.getBoundingClientRect()
-      return {
-        top: rect.top + getDomNode().scrollTop,
-        left: rect.left + getDomNode().scrollLeft
-      }
-    }
-
-    // 更新提示框位置
-    const updateTipStyle = () => {
-      const { tipTarget, tipStore } = reactData
-      if (tipTarget) {
-        const { scrollTop, scrollLeft, visibleWidth } = getDomNode()
-        const { top, left } = getAbsolutePos(tipTarget)
-        const el = refElem.value
-        if (!el) return
-
-        const marginSize = 6
-        const offsetHeight = el.offsetHeight
-        const offsetWidth = el.offsetWidth
-
-        let tipLeft = left
-        let tipTop = top - offsetHeight - marginSize
-
-        // 水平居中
-        tipLeft = Math.max(
-          marginSize,
-          left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2)
-        )
-
-        // 检查是否超出右边界
-        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
-          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
-        }
-
-        // 检查是否超出上边界，如果超出则显示在底部
-        if (top - offsetHeight < scrollTop + marginSize) {
-          tipStore.placement = 'bottom'
-          tipTop = top + tipTarget.offsetHeight + marginSize
-        }
-
-        tipStore.style.top = `${tipTop}px`
-        tipStore.style.left = `${tipLeft}px`
-        tipStore.arrowStyle = {
-          left: `${left - tipLeft + tipTarget.offsetWidth / 2}px`
-        }
-      }
-    }
-
-    // 更新值
-    const updateValue = (value: boolean) => {
-      if (value !== reactData.visible) {
-        reactData.visible = value
-        reactData.isUpdate = true
-        emit('update:modelValue', value)
-      }
-    }
-
-    // 显示提示框
-    const showTip = () => {
-      const el = refElem.value
-      if (el) {
-        const parentNode = el.parentNode
-        if (!parentNode) {
-          document.body.appendChild(el)
-        }
-      }
-
-      updateValue(true)
-      reactData.tipZindex = 1000 // 简化的 z-index
-      reactData.tipStore.placement = 'top'
-      reactData.tipStore.style = {
-        width: 'auto',
-        left: 0,
-        top: 0,
-        zIndex: reactData.tipZindex
-      }
-      reactData.tipStore.arrowStyle = { left: '50%' }
-
-      return nextTick().then(() => {
-        updateTipStyle()
-        return nextTick().then(() => {
-          updateTipStyle()
-        })
-      })
-    }
-
-    // 处理延迟函数
-    const handleDelayFn = () => {
-      internalData.showDelayTip = debounce(() => {
-        if (reactData.tipActive) {
-          showTip()
-        }
-        //@ts-ignore
-      }, props.enterDelay)
-    }
-
-    // 处理显示逻辑
-    const handleVisible = (target: HTMLElement | null, content?: string | number) => {
-      const contentSlot = slots.content
-      if (!contentSlot && (content === '' || eqNull(content))) {
-        return nextTick()
-      }
-
-      if (target) {
-        const { showDelayTip } = internalData
-        const { trigger, enterDelay } = props
-        reactData.tipActive = true
-        reactData.tipTarget = target
-        //@ts-ignore
-        reactData.tipContent = isNull(content) ? '' : content
-
-        if (enterDelay && trigger === 'hover') {
-          if (showDelayTip) {
-            showDelayTip()
-          }
-        } else {
-          return showTip()
-        }
-      }
-      return nextTick()
-    }
-
-    // 事件处理函数
-    const targetMouseenterEvent = () => {
-      handleVisible(reactData.target, props.content)
-    }
-
-    const targetMouseleaveEvent = () => {
-      const { trigger, enterable, leaveDelay } = props
-      reactData.tipActive = false
-
-      if (enterable && trigger === 'hover') {
-        setTimeout(() => {
-          if (!reactData.tipActive) {
-            close()
-          }
-        }, leaveDelay)
-      } else {
-        close()
-      }
-    }
-
-    const wrapperMouseenterEvent = () => {
-      reactData.tipActive = true
-    }
-
-    const wrapperMouseleaveEvent = () => {
-      const { trigger, enterable, leaveDelay } = props
-      reactData.tipActive = false
-
-      if (enterable && trigger === 'hover') {
-        setTimeout(() => {
-          if (!reactData.tipActive) {
-            close()
-          }
-        }, leaveDelay)
-      }
-    }
-
-    const clickEvent = () => {
-      if (reactData.visible) {
-        close()
-      } else {
-        handleVisible(reactData.target, props.content)
-      }
-    }
-
-    // 关闭方法
-    const close = () => {
-      reactData.tipTarget = null
-      reactData.tipActive = false
-      Object.assign(reactData.tipStore, {
-        style: {},
-        placement: '',
-        arrowStyle: null
-      })
-      updateValue(false)
-      return nextTick()
-    }
-
-    // 公开方法
-    const tooltipMethods: TooltipMethods = {
-      open(target?: HTMLElement | null, content?: string | number) {
-        return handleVisible(target || reactData.target, content)
-      },
-      close,
-      updatePlacement() {
-        return nextTick().then(() => {
-          const { tipTarget } = reactData
-          const el = refElem.value
-          if (tipTarget && el) {
-            updateTipStyle()
-            return nextTick().then(() => {
-              updateTipStyle()
-            })
-          }
-        })
-      },
-      isActived() {
-        return reactData.tipActive
-      },
-      setActived(active: boolean) {
-        reactData.tipActive = !!active
-      }
-    }
-
-    // 渲染内容
-    const renderContent = () => {
-      const { tipContent } = reactData
-      const contentSlot = slots.content
-
-      const contVNs: VNode[] = []
-      if (contentSlot) {
-        contVNs.push(
-          h('div', {}, contentSlot({}))
-        )
-      } else {
-        contVNs.push(
-          h('div', {}, `${tipContent}`)
-        )
-      }
-
-      return h('div', {
-        ref: contentWrapperfElem,
-        class: 'vxe-tooltip--content'
-      }, contVNs)
-    }
-
-    // 渲染虚拟节点
-    const renderVN = () => {
-      const { theme, isArrow, enterable } = props
-      const { tipActive, visible, tipStore } = reactData
-      const defaultSlot = slots.default
-
-      let ons
-      if (enterable) {
-        ons = {
-          onMouseenter: wrapperMouseenterEvent,
-          onMouseleave: wrapperMouseleaveEvent
-        }
-      }
-
-      return h('div', {
-        ref: refElem,
-        class: [
-          'vxe-tooltip--wrapper',
-          `theme--${theme}`,
-          {
-            [`placement--${tipStore.placement}`]: tipStore.placement,
-            'is--enterable': enterable,
-            'is--visible': visible,
-            'is--arrow': isArrow,
-            'is--active': tipActive
-          }
-        ],
-        style: {
-          ...tipStore.style,
-          // 添加过渡效果
-          transition: 'opacity 0.2s ease, transform 0.2s ease',
-          opacity: visible ? 1 : 0,
-          transform: visible ? 'scale(1)' : 'scale(0.95)'
-        },
-        ...ons
-      }, [
-        renderContent(),
-        isArrow
-          ? h('div', {
-            class: 'vxe-tooltip--arrow',
-            style: tipStore.arrowStyle
-          })
-          : null,
-        ...(defaultSlot ? defaultSlot({}) : [])
-      ])
-    }
-
-    // 监听器
-    watch(() => props.enterDelay, () => {
-      handleDelayFn()
-    })
-
-    watch(() => props.content, (val) => {
-      //@ts-ignore
-      reactData.tipContent = isNull(val) ? '' : val
-    })
-
-    watch(() => props.modelValue, (val) => {
-      if (!reactData.isUpdate) {
-        if (val) {
-          handleVisible(reactData.target, props.content)
-        } else {
-          close()
-        }
-      }
-      reactData.isUpdate = false
-    })
-
-    // 生命周期钩子
-    onMounted(() => {
-      nextTick(() => {
-        const { trigger, content } = props
-        const wrapperElem = refElem.value
-
-        if (wrapperElem) {
-          const parentNode = wrapperElem.parentNode
-          if (parentNode) {
-            //@ts-ignore
-            reactData.tipContent = isNull(content) ? '' : content
-            reactData.tipZindex = 1000
-
-            // 将子元素移动到父级
-            const children = Array.from(wrapperElem.children)
-            children.forEach((elem, index) => {
-              if (index > 1) {
-                parentNode.insertBefore(elem, wrapperElem)
-                if (!reactData.target) {
-                  reactData.target = elem as HTMLElement
-                }
-              }
-            })
-
-            parentNode.removeChild(wrapperElem)
-
-            // 绑定事件
-            const { target } = reactData
-            if (target) {
-              if (trigger === 'hover') {
-                target.onmouseenter = targetMouseenterEvent
-                target.onmouseleave = targetMouseleaveEvent
-              } else if (trigger === 'click') {
-                target.onclick = clickEvent
-              }
-            }
-
-            // 如果 modelValue 为 true，则显示
-            if (props.modelValue) {
-              handleVisible(target, content)
-            }
-          }
-        }
-      })
-    })
-
-    onBeforeUnmount(() => {
-      const { target } = reactData
-      const wrapperElem = refElem.value
-
-      if (target) {
-        target.onmouseenter = null
-        target.onmouseleave = null
-        target.onclick = null
-      }
-
-      if (wrapperElem) {
-        const parentNode = wrapperElem.parentNode
-        if (parentNode) {
-          parentNode.removeChild(wrapperElem)
-        }
-      }
-    })
-
-    handleDelayFn()
-
-    return {
-      ...tooltipMethods,
-      renderVN
-    }
-  },
-  //@ts-ignore
-  render() {
-    //@ts-ignore
-    return this.renderVN()
-  }
-}
+//@ts-ignore
+import {
+  h,
+  ref,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  computed,
+  reactive,
+  watch,
+  type PropType,
+  type VNode
+} from 'vue'
+
+// 定义属性类型
+interface VxeTooltipPropTypes {
+  modelValue?: boolean
+  content?: string | number
+  trigger?: 'hover' | 'click'
+  theme?: 'dark' | 'light'
+  enterDelay?: number
+  leaveDelay?: number
+  isArrow?: boolean
+  enterable?: boolean
+}
+
+// 定义响应式数据类型
+interface TooltipReactData {
+  target: HTMLElement | null
+  isUpdate: boolean
+  visible: boolean
+  tipContent: string | number
+  tipActive: boolean
+  tipTarget: HTMLElement | null
+  tipZindex: number
+  tipStore: {
+    style: Record<string, string | number>
+    placement: string
+    arrowStyle: Record<string, string | number> | null
+  }
+}
+
+// 定义内部数据类型
+interface TooltipInternalData {
+  showDelayTip?: Function
+}
+
+// 定义组件方法类型
+interface TooltipMethods {
+  open: (target?: HTMLElement | null, content?: string | number) => void
+  close: () => void
+  updatePlacement: () => Promise<void>
+  isActived: () => boolean
+  setActived: (active: boolean) => void
+}
+
+// 简单的防抖函数
+function debounce(func: Function, wait: number) {
+  let timeout: number | null = null
+  return function (this: any, ...args: any[]) {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = window.setTimeout(() => {
+      func.apply(this, args)
+    }, wait) as any
+  }
+}
+
+// 检查值是否为空
+function isNull(value: any): boolean {
+  return value === null || value === undefined
+}
+
+// 检查值是否相等
+function eqNull(value: any): boolean {
+  return value === null || value === undefined || value === ''
+}
+
+export default {
+  name: 'VxeTooltip',
+  props: {
+    modelValue: Boolean,
+    content: [String, Number],
+    trigger: {
+      type: String as PropType<'hover' | 'click'>,
+      default: 'hover'
+    },
+    theme: {
+      type: String as PropType<'dark' | 'light'>,
+      default: 'dark'
+    },
+    isArrow: {
+      type: Boolean,
+      default: true
+    },
+    enterable: {
+      type: Boolean,
+      default: true
+    },
+    enterDelay: {
+      type: Number,
+      default: 0
+    },
+    leaveDelay: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props: VxeTooltipPropTypes, { slots, emit }: any) {
+    // 响应式数据
+    const reactData = reactive<TooltipReactData>({
+      target: null,
+      isUpdate: false,
+      visible: false,
+      tipContent: '',
+      tipActive: false,
+      tipTarget: null,
+      tipZindex: 0,
+      tipStore: {
+        style: {},
+        placement: '',
+        arrowStyle: {}
+      }
+    })
+
+    // 内部数据
+    const internalData: TooltipInternalData = {}
+
+    // DOM 引用
+    const refElem = ref<HTMLDivElement>()
+    const contentWrapperfElem = ref<HTMLDivElement>()
+
+    // 获取 DOM 位置信息
+    const getDomNode = () => {
+      return {
+        scrollTop: window.scrollY || document.documentElement.scrollTop,
+        scrollLeft: window.scrollX || document.documentElement.scrollLeft,
+        visibleWidth: document.documentElement.clientWidth
+      }
+    }
+
+    // 获取元素绝对位置
+    const getAbsolutePos = (element: HTMLElement) => {
+      const rect = element.getBoundingClientRect()
+      return {
+        top: rect.top + getDomNode().scrollTop,
+        left: rect.left + getDomNode().scrollLeft
+      }
+    }
+
+    // 更新提示框位置
+    const updateTipStyle = () => {
+      const { tipTarget, tipStore } = reactData
+      if (tipTarget) {
+        const { scrollTop, scrollLeft, visibleWidth } = getDomNode()
+        const { top, left } = getAbsolutePos(tipTarget)
+        const el = refElem.value
+        if (!el) return
+
+        const marginSize = 6
+        const offsetHeight = el.offsetHeight
+        const offsetWidth = el.offsetWidth
+
+        let tipLeft = left
+        let tipTop = top - offsetHeight - marginSize
+
+        // 水平居中
+        tipLeft = Math.max(
+          marginSize,
+          left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2)
+        )
+
+        // 检查是否超出右边界
+        if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
+          tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
+        }
+
+        // 检查是否超出上边界，如果超出则显示在底部
+        if (top - offsetHeight < scrollTop + marginSize) {
+          tipStore.placement = 'bottom'
+          tipTop = top + tipTarget.offsetHeight + marginSize
+        }
+
+        tipStore.style.top = `${tipTop}px`
+        tipStore.style.left = `${tipLeft}px`
+        tipStore.arrowStyle = {
+          left: `${left - tipLeft + tipTarget.offsetWidth / 2}px`
+        }
+      }
+    }
+
+    // 更新值
+    const updateValue = (value: boolean) => {
+      if (value !== reactData.visible) {
+        reactData.visible = value
+        reactData.isUpdate = true
+        emit('update:modelValue', value)
+      }
+    }
+
+    // 显示提示框
+    const showTip = () => {
+      const el = refElem.value
+      if (el) {
+        const parentNode = el.parentNode
+        if (!parentNode) {
+          document.body.appendChild(el)
+        }
+      }
+
+      updateValue(true)
+      reactData.tipZindex = 1000 // 简化的 z-index
+      reactData.tipStore.placement = 'top'
+      reactData.tipStore.style = {
+        width: 'auto',
+        left: 0,
+        top: 0,
+        zIndex: reactData.tipZindex
+      }
+      reactData.tipStore.arrowStyle = { left: '50%' }
+
+      return nextTick().then(() => {
+        updateTipStyle()
+        return nextTick().then(() => {
+          updateTipStyle()
+        })
+      })
+    }
+
+    // 处理延迟函数
+    const handleDelayFn = () => {
+      internalData.showDelayTip = debounce(() => {
+        if (reactData.tipActive) {
+          showTip()
+        }
+        //@ts-ignore
+      }, props.enterDelay)
+    }
+
+    // 处理显示逻辑
+    const handleVisible = (target: HTMLElement | null, content?: string | number) => {
+      const contentSlot = slots.content
+      if (!contentSlot && (content === '' || eqNull(content))) {
+        return nextTick()
+      }
+
+      if (target) {
+        const { showDelayTip } = internalData
+        const { trigger, enterDelay } = props
+        reactData.tipActive = true
+        reactData.tipTarget = target
+        //@ts-ignore
+        reactData.tipContent = isNull(content) ? '' : content
+
+        if (enterDelay && trigger === 'hover') {
+          if (showDelayTip) {
+            showDelayTip()
+          }
+        } else {
+          return showTip()
+        }
+      }
+      return nextTick()
+    }
+
+    // 事件处理函数
+    const targetMouseenterEvent = () => {
+      handleVisible(reactData.target, props.content)
+    }
+
+    const targetMouseleaveEvent = () => {
+      const { trigger, enterable, leaveDelay } = props
+      reactData.tipActive = false
+
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            close()
+          }
+        }, leaveDelay)
+      } else {
+        close()
+      }
+    }
+
+    const wrapperMouseenterEvent = () => {
+      reactData.tipActive = true
+    }
+
+    const wrapperMouseleaveEvent = () => {
+      const { trigger, enterable, leaveDelay } = props
+      reactData.tipActive = false
+
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!reactData.tipActive) {
+            close()
+          }
+        }, leaveDelay)
+      }
+    }
+
+    const clickEvent = () => {
+      if (reactData.visible) {
+        close()
+      } else {
+        handleVisible(reactData.target, props.content)
+      }
+    }
+
+    // 关闭方法
+    const close = () => {
+      reactData.tipTarget = null
+      reactData.tipActive = false
+      Object.assign(reactData.tipStore, {
+        style: {},
+        placement: '',
+        arrowStyle: null
+      })
+      updateValue(false)
+      return nextTick()
+    }
+
+    // 公开方法
+    const tooltipMethods: TooltipMethods = {
+      open(target?: HTMLElement | null, content?: string | number) {
+        return handleVisible(target || reactData.target, content)
+      },
+      close,
+      updatePlacement() {
+        return nextTick().then(() => {
+          const { tipTarget } = reactData
+          const el = refElem.value
+          if (tipTarget && el) {
+            updateTipStyle()
+            return nextTick().then(() => {
+              updateTipStyle()
+            })
+          }
+        })
+      },
+      isActived() {
+        return reactData.tipActive
+      },
+      setActived(active: boolean) {
+        reactData.tipActive = !!active
+      }
+    }
+
+    // 渲染内容
+    const renderContent = () => {
+      const { tipContent } = reactData
+      const contentSlot = slots.content
+
+      const contVNs: VNode[] = []
+      if (contentSlot) {
+        contVNs.push(
+          h('div', {}, contentSlot({}))
+        )
+      } else {
+        contVNs.push(
+          h('div', {}, `${tipContent}`)
+        )
+      }
+
+      return h('div', {
+        ref: contentWrapperfElem,
+        class: 'vxe-tooltip--content'
+      }, contVNs)
+    }
+
+    // 渲染虚拟节点
+    const renderVN = () => {
+      const { theme, isArrow, enterable } = props
+      const { tipActive, visible, tipStore } = reactData
+      const defaultSlot = slots.default
+
+      let ons
+      if (enterable) {
+        ons = {
+          onMouseenter: wrapperMouseenterEvent,
+          onMouseleave: wrapperMouseleaveEvent
+        }
+      }
+
+      return h('div', {
+        ref: refElem,
+        class: [
+          'vxe-tooltip--wrapper',
+          `theme--${theme}`,
+          {
+            [`placement--${tipStore.placement}`]: tipStore.placement,
+            'is--enterable': enterable,
+            'is--visible': visible,
+            'is--arrow': isArrow,
+            'is--active': tipActive
+          }
+        ],
+        style: {
+          ...tipStore.style,
+          // 添加过渡效果
+          transition: 'opacity 0.2s ease, transform 0.2s ease',
+          opacity: visible ? 1 : 0,
+          transform: visible ? 'scale(1)' : 'scale(0.95)'
+        },
+        ...ons
+      }, [
+        renderContent(),
+        isArrow
+          ? h('div', {
+            class: 'vxe-tooltip--arrow',
+            style: tipStore.arrowStyle
+          })
+          : null,
+        ...(defaultSlot ? defaultSlot({}) : [])
+      ])
+    }
+
+    // 监听器
+    watch(() => props.enterDelay, () => {
+      handleDelayFn()
+    })
+
+    watch(() => props.content, (val) => {
+      //@ts-ignore
+      reactData.tipContent = isNull(val) ? '' : val
+    })
+
+    watch(() => props.modelValue, (val) => {
+      if (!reactData.isUpdate) {
+        if (val) {
+          handleVisible(reactData.target, props.content)
+        } else {
+          close()
+        }
+      }
+      reactData.isUpdate = false
+    })
+
+    // 生命周期钩子
+    onMounted(() => {
+      nextTick(() => {
+        const { trigger, content } = props
+        const wrapperElem = refElem.value
+
+        if (wrapperElem) {
+          const parentNode = wrapperElem.parentNode
+          if (parentNode) {
+            //@ts-ignore
+            reactData.tipContent = isNull(content) ? '' : content
+            reactData.tipZindex = 1000
+
+            // 将子元素移动到父级
+            const children = Array.from(wrapperElem.children)
+            children.forEach((elem, index) => {
+              if (index > 1) {
+                parentNode.insertBefore(elem, wrapperElem)
+                if (!reactData.target) {
+                  reactData.target = elem as HTMLElement
+                }
+              }
+            })
+
+            parentNode.removeChild(wrapperElem)
+
+            // 绑定事件
+            const { target } = reactData
+            if (target) {
+              if (trigger === 'hover') {
+                target.onmouseenter = targetMouseenterEvent
+                target.onmouseleave = targetMouseleaveEvent
+              } else if (trigger === 'click') {
+                target.onclick = clickEvent
+              }
+            }
+
+            // 如果 modelValue 为 true，则显示
+            if (props.modelValue) {
+              handleVisible(target, content)
+            }
+          }
+        }
+      })
+    })
+
+    onBeforeUnmount(() => {
+      const { target } = reactData
+      const wrapperElem = refElem.value
+
+      if (target) {
+        target.onmouseenter = null
+        target.onmouseleave = null
+        target.onclick = null
+      }
+
+      if (wrapperElem) {
+        const parentNode = wrapperElem.parentNode
+        if (parentNode) {
+          parentNode.removeChild(wrapperElem)
+        }
+      }
+    })
+
+    handleDelayFn()
+
+    return {
+      ...tooltipMethods,
+      renderVN
+    }
+  },
+  //@ts-ignore
+  render() {
+    //@ts-ignore
+    return this.renderVN()
+  }
+}