测试省略号

components.d.ts

@@ -33,7 +33,6 @@ declare module 'vue' {
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElTree: typeof import('element-plus/es')['ElTree']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     File: typeof import('./src/components/Upload/file.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']
@@ -77,7 +76,4 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/components/CtTooltip/index.js

@@ -38,6 +38,7 @@ function getElStyleAttr(element, attr) {
   return styles[attr]
 }
 
+// const positionXY = getPosition(el)
 // const getPosition = (target) => {
 //   const x = target.offsetLeft + target.offsetWidth/2
 //   const y = target.offsetTop + target.offsetHeight/2
@@ -47,78 +48,77 @@ 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 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 = {
-  // mounted(el, binding) {
-  //   //获取指令的参数
-  //   const {
-  //       value: {
-  //           placement, content, destroyOnLeave
-  //       } = {}
-  //   } = binding;
-  //   // 加上超出...样式
-  //   el.style.overflow = "hidden";
-  //   el.style.textOverflow = "ellipsis";
-  //   el.style.whiteSpace = "nowrap";
-  //   //鼠标移开时 清除元素
-  //   const onMouseLeave = () => {
-  //     if (el.w_tipInstance) {
-  //       el.w_tipInstance.hiddenTip()
-  //       el.w_tooltip.remove()
-  //       el.w_tipInstance = null
-  //       el.w_tooltip = null
-  //     }
-  //   };
-  //   const onMouseEnter = () => {
-  //     // 判断内容长度 需要展示
-  //     if (isOverflow(el)) {
-  //       // const positionXY = getPosition(el)
-  //       const directiveList = allPlacements.filter(placement => binding.modifiers[placement])
-  //       const placements = directiveList.length ? directiveList : allPlacements
-  //       if (!el.w_tooltip) {
-  //         // 创建tooltip实例
-  //         const vm = createApp(MyToolTip)
-  //         // 创建根元素
-  //         el.w_tooltip = document.createElement('div')
-  //         // 挂载到页面
-  //         document.body.appendChild(el.w_tooltip)
-  //         el.w_tooltip.id = `tooltip_${Math.floor(Math.random() * 10000)}`
-  //         el.w_tipInstance = vm.mount(el.w_tooltip)
-  //       }
-  //       // 设置 tooltip 显示方向
-  //       el.w_tipInstance.placements = placement || placements[0] || 'top'
-  //       // 设置显示内容
-  //       el.w_tipInstance.setContent(content || el.innerText)
-  //       // 使 tooltip 显示
-  //       el.w_tipInstance.showTip()
-  //       nextTick(() => {
-  //         // 计算 tooltip 在页面中的位置
-  //         calculationLocation(el.w_tipInstance, el, placements[0])
-  //       })
-  //       el._scrollHandler = () => {
-  //         // 重新定位位置
-  //         if (el.w_tipInstance && el.w_tipInstance.tooltipShow) calculationLocation(el.w_tipInstance, el, placements[0])
-  //       }
-  //       window.addEventListener('scroll', el._scrollHandler)
-  //       const _destroyOnLeave = destroyOnLeave || true
-  //       if (_destroyOnLeave) el.addEventListener("mouseleave", onMouseLeave);
-  //     }
-  //   };
-  //   el.addEventListener("mouseenter", onMouseEnter);
-  // },
-  // unmounted(el) {
-  //   if (el.w_tooltip) {
-  //     document.body.removeChild(el.w_tooltip)
-  //   }
-  //   window.removeEventListener('scroll', el._scrollHandler)
-  // }
-}
+export const ellipsisTooltip = localStorage.getItem('useEllipseTooltip') ? {
+  mounted(el, binding) {
+    //获取指令的参数
+    const {
+        value: {
+            placement, content, destroyOnLeave
+        } = {}
+    } = binding;
+    // 加上超出...样式
+    el.style.overflow = "hidden";
+    el.style.textOverflow = "ellipsis";
+    el.style.whiteSpace = "nowrap";
+    //鼠标移开时 清除元素
+    const onMouseLeave = () => {
+      if (el.w_tipInstance) {
+        el.w_tipInstance.hiddenTip()
+        el.w_tooltip.remove()
+        el.w_tipInstance = null
+        el.w_tooltip = null
+      }
+    };
+    const onMouseEnter = () => {
+      // 判断内容长度 需要展示
+      if (isOverflow(el)) {
+        const directiveList = allPlacements.filter(placement => binding.modifiers[placement])
+        const placements = directiveList.length ? directiveList : allPlacements
+        if (!el.w_tooltip) {
+          // 创建tooltip实例
+          const vm = createApp(MyToolTip)
+          // 创建根元素
+          el.w_tooltip = document.createElement('div')
+          // 挂载到页面
+          document.body.appendChild(el.w_tooltip)
+          el.w_tooltip.id = `tooltip_${Math.floor(Math.random() * 10000)}`
+          el.w_tipInstance = vm.mount(el.w_tooltip)
+        }
+        // 设置 tooltip 显示方向
+        el.w_tipInstance.placements = placement || placements[0] || 'top'
+        // 设置显示内容
+        el.w_tipInstance.setContent(content || el.innerText)
+        // 使 tooltip 显示
+        el.w_tipInstance.showTip()
+        nextTick(() => {
+          // 计算 tooltip 在页面中的位置
+          calculationLocation(el.w_tipInstance, el, placements[0])
+        })
+        el._scrollHandler = () => {
+          // 重新定位位置
+          if (el.w_tipInstance && el.w_tipInstance.tooltipShow) calculationLocation(el.w_tipInstance, el, placements[0])
+        }
+        window.addEventListener('scroll', el._scrollHandler)
+        const _destroyOnLeave = destroyOnLeave || true
+        if (_destroyOnLeave) el.addEventListener("mouseleave", onMouseLeave);
+      }
+    };
+    el.addEventListener("mouseenter", onMouseEnter);
+  },
+  unmounted(el) {
+    if (el.w_tooltip) {
+      document.body.removeChild(el.w_tooltip)
+    }
+    window.removeEventListener('scroll', el._scrollHandler)
+  }
+} : {}