测试

src/components/CtTooltip/ToolTip.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import {ref, computed, reactive } from 'vue'
+import {ref, computed } from 'vue'
 
 export default {
   setup() {
@@ -45,13 +45,13 @@ export default {
     }
 
     // 位置
-    const tooltipPosition = reactive({
+    const tooltipPosition = ref({
       x: 0,
       y: 0
     })
     const tooltipStyle = computed(() => {
       return {
-        transform: `translate3d(${tooltipPosition.x}px,${tooltipPosition.y}px,0)`
+        transform: `translate3d(${tooltipPosition.value.x}px,${tooltipPosition.value.y}px,0)`
       }
     })
     return {

src/components/CtTooltip/index.js

@@ -9,14 +9,15 @@ import MyToolTip from './ToolTip.vue'
 // 位置定位
 function calculationLocation(el, target, placements) {
   if (!el || !target) return;
+  console.log('el:', el)
+  console.log('target:', target)
+
   el.tooltipPosition.y = 0;
   el.tooltipPosition.x = 0;
-  let el_dom = el.$el.nextElementSibling.getBoundingClientRect()
+  let el_dom = el.$el?.nextElementSibling?.getBoundingClientRect() || null
+  if (!el_dom) return
   let target_dom = target.getBoundingClientRect()
 
-  console.log('el_dom:', el_dom)
-  console.log('target_dom:', target_dom)
-
   if (placements === "left") {
     el.tooltipPosition.x = target_dom.x - el_dom.width - 10
     el.tooltipPosition.y = target_dom.y - el_dom.height / 2 + target_dom.height / 2
@@ -103,8 +104,10 @@ export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
         // 使 tooltip 显示
         el.w_tipInstance.showTip()
         nextTick(() => {
-          // 计算 tooltip 在页面中的位置
-          calculationLocation(el.w_tipInstance, el, placements[0])
+          nextTick(() => {
+            // 计算 tooltip 在页面中的位置
+            calculationLocation(el.w_tipInstance, el, placements[0])
+          })
         })
         el._scrollHandler = () => {
           // 重新定位位置