瀏覽代碼

Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

Xiao_123 4 月之前
父節點
當前提交
b1fa2410e6
共有 2 個文件被更改,包括 12 次插入7 次删除
  1. 3 3
      src/components/CtTooltip/ToolTip.vue
  2. 9 4
      src/components/CtTooltip/index.js

+ 3 - 3
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 {

+ 9 - 4
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
@@ -86,6 +87,7 @@ export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
       if (isOverflow(el)) {
         const directiveList = allPlacements.filter(placement => binding.modifiers[placement])
         const placements = directiveList.length ? directiveList : allPlacements
+        console.log('el.w_tooltip-1:', el.w_tooltip)
         if (!el.w_tooltip) {
           // 创建tooltip实例
           const vm = createApp(MyToolTip)
@@ -96,12 +98,15 @@ export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
           el.w_tooltip.id = `tooltip_${Math.floor(Math.random() * 10000)}`
           el.w_tipInstance = vm.mount(el.w_tooltip)
         }
+        console.log('el.w_tooltip-2:', el.w_tooltip)
         // 设置 tooltip 显示方向
         el.w_tipInstance.placements = placement || placements[0] || 'top'
         // 设置显示内容
         el.w_tipInstance.setContent(content || el.innerText)
         // 使 tooltip 显示
         el.w_tipInstance.showTip()
+        console.log('el:', el)
+        console.log('el.w_tipInstance:', el.w_tipInstance)
         nextTick(() => {
           // 计算 tooltip 在页面中的位置
           calculationLocation(el.w_tipInstance, el, placements[0])