隐藏测试

src/components/CtTooltip/index.js

@@ -1,5 +1,5 @@
 // 引入组件
-import { createApp, nextTick } from "vue"
+import {createApp, nextTick} from "vue";
 import MyToolTip from './ToolTip.vue'
 
 /**
@@ -9,18 +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() || target?.w_tipInstance?.$el?.nextElementSibling?.getBoundingClientRect() || null
-
-  const parent_dom = el?.$el ? el.$el?.nextElementSibling?.getBoundingClientRect() : el._.vnode.el.getBoundingClientRect()
-  let el_dom = parent_dom || target?.w_tipInstance?.$el?.nextElementSibling?.getBoundingClientRect() || null
-
+  let el_dom = el.$el?.nextElementSibling?.getBoundingClientRect() || target?.w_tipInstance?.$el?.nextElementSibling?.getBoundingClientRect() || null
   let target_dom = target.getBoundingClientRect()
-  console.log(parent_dom, el_dom, el, el._, el._.vnode, target, placements, '位置定位')
   if(!el_dom) {
-    // console.log('el_dom:不存在', el_dom)
+    console.log('el_dom:不存在', el_dom)
     return
   }
 
@@ -56,23 +53,18 @@ function getElStyleAttr(element, attr) {
 // }
 
 const isOverflow = (target) => {
-  // const scrollWidth = target.scrollWidth
-  // const offsetWidth = target.offsetWidth
-  // const range = document.createRange()
-  // range.setStart(target, 0)
-  // range.setEnd(target, target.childNodes.length)
-  // const rangeWidth = range.getBoundingClientRect().width
-  // const padding = (parseInt(getElStyleAttr(target, 'paddingLeft'), 10) || 0) + (parseInt(getElStyleAttr(target, 'paddingRight'), 10) || 0)
-  // return (rangeWidth + padding > target.offsetWidth) || scrollWidth > offsetWidth
-
-  // return scrollWidth > offsetWidth
-
   const scrollWidth = target.scrollWidth
-  const clientWidth = target.clientWidth
-  return scrollWidth > clientWidth
+  const offsetWidth = target.offsetWidth
+  const range = document.createRange()
+  range.setStart(target, 0)
+  range.setEnd(target, target.childNodes.length)
+  const rangeWidth = range.getBoundingClientRect().width
+  const padding = (parseInt(getElStyleAttr(target, 'paddingLeft'), 10) || 0) + (parseInt(getElStyleAttr(target, 'paddingRight'), 10) || 0)
+  return (rangeWidth + padding > target.offsetWidth) || scrollWidth > offsetWidth
+  // return scrollWidth > offsetWidth
 }
 
-export const ellipsisTooltip = {
+export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
   mounted(el, binding) {
     //获取指令的参数
     const {
@@ -98,7 +90,7 @@ export const ellipsisTooltip = {
       if (isOverflow(el)) {
         const directiveList = allPlacements.filter(placement => binding.modifiers[placement])
         const placements = directiveList.length ? directiveList : allPlacements
-        // console.log('w_tooltip1:', el.w_tooltip)
+        console.log('w_tooltip1:', el.w_tooltip)
         // if (!el.w_tooltip) {}
         // 创建tooltip实例
         const vm = createApp(MyToolTip)
@@ -108,18 +100,14 @@ export const ellipsisTooltip = {
         document.body.appendChild(el.w_tooltip)
         el.w_tooltip.id = `tooltip_${Math.floor(Math.random() * 10000)}`
         el.w_tipInstance = vm.mount(el.w_tooltip)
-        // console.log('w_tooltip2:', el.w_tooltip)
+        console.log('w_tooltip2:', el.w_tooltip)
+        console.log('w_tipInstance:', el.w_tipInstance)
         // 设置 tooltip 显示方向
         el.w_tipInstance.placements = placement || placements[0] || 'top'
         // 设置显示内容
         el.w_tipInstance.setContent(content || el.innerText)
         // 使 tooltip 显示
         el.w_tipInstance.showTip()
-        
-        
-        // console.log('w_tipInstance:', el.w_tipInstance, el, placements[0])
-
-
         nextTick(() => {
           // 计算 tooltip 在页面中的位置
           calculationLocation(el.w_tipInstance, el, placements[0])
@@ -141,5 +129,5 @@ export const ellipsisTooltip = {
     }
     window.removeEventListener('scroll', el._scrollHandler)
   }
-}
+} : {}