Feat: 增加 v-overflow-tooltip 指令

src/App.vue

@@ -66,7 +66,7 @@
                 @click.prevent
               />
             </el-tooltip>
-            <span>{{ row.meta.description }}</span>
+            <span>{{ row.meta && row.meta.description }}</span>
           </template>
         </el-table-column>
       </el-table>

src/directives/overflow-tooltip.js

@@ -0,0 +1,79 @@
+const plugin = {
+  install(Vue) {
+    Vue.directive('overflow-tooltip', {
+      inserted: (el, binding, vnode) => {
+        // 设置内容
+        if (el.innerText === '') {
+          el.innerText = binding.value
+        }
+        // 设置元素样式
+        Object.assign(el.style, {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        })
+
+        const elComputed = document.defaultView.getComputedStyle(el, '')
+        const padding = parseInt(elComputed.paddingLeft.replace('px', '')) + parseInt(elComputed.paddingRight.replace('px', ''))
+        const range = document.createRange()
+        range.setStart(el, 0)
+        range.setEnd(el, el.childNodes.length)
+        const rangeWidth = range.getBoundingClientRect().width
+
+        console.log('vnode', vnode)
+
+        if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
+          // 鼠标移入时，将浮沉元素插入到 body 中
+          el.onmouseenter = function (e) {
+            // 创建浮层元素并设置样式
+            const vcTooltipDom = document.createElement('div')
+            Object.assign(vcTooltipDom.style, {
+              position: 'absolute',
+              background: '#303133',
+              color: '#fff',
+              fontSize: '12px',
+              zIndex: '2000',
+              padding: '10px',
+              borderRadius: '4px',
+              lineHeight: 1.2,
+              minHeight: '10px',
+              wordWrap: 'break-word',
+            })
+            // 设置 id 方便寻找
+            vcTooltipDom.setAttribute('id', 'vc-tooltip')
+            // 将浮层插入到 body 中
+            document.body.appendChild(vcTooltipDom)
+            // 浮层中的文字 通过属性值传递动态的显示文案
+            document.getElementById('vc-tooltip').innerHTML = binding.value
+          }
+          // 鼠标移动时，动态修改浮沉的位置属性
+          el.onmousemove = function (e) {
+            const vcTooltipDom = document.getElementById('vc-tooltip')
+            vcTooltipDom.style.top = e.clientY + 15 + 'px'
+            vcTooltipDom.style.left = e.clientX + 15 + 'px'
+          }
+          // 鼠标移出时将浮层元素销毁
+          el.onmouseleave = function () {
+            // 找到浮层元素并移出
+            const vcTooltipDom = document.getElementById('vc-tooltip')
+            vcTooltipDom && document.body.removeChild(vcTooltipDom)
+          }
+        }
+      }
+    })
+  }
+}
+
+
+let GlobalVue = null
+if (typeof window !== 'undefined') {
+  GlobalVue = window.Vue
+} else if (typeof global !== 'undefined') {
+  GlobalVue = global.Vue
+}
+
+if (GlobalVue) {
+  GlobalVue.use(plugin)
+}
+
+export default plugin

src/main.js

@@ -9,6 +9,7 @@ import elTableSticky from '@cell-x/el-table-sticky'
 import vueMinderEditor from 'vue-minder-editor-extended'
 import ElCardCollapse from '@/components/ElCardCollapse.vue'
 import Clickoutside from 'element-ui/src/utils/clickoutside'
+import overflowTooltip from '@/directives/overflow-tooltip'
 
 // register svg component globally
 Vue.component('SvgIcon', SvgIcon)
@@ -32,6 +33,8 @@ Vue.directive('focus', {
     el.focus()
   }
 })
+// v-overflow-tooltip 指令，用于元素内容溢出时显示 tooltip
+Vue.use(overflowTooltip)
 
 new Vue({
   router,

src/router.js

@@ -59,6 +59,12 @@ const routes = [
     meta: { description: '脑图编辑器 demo' },
     component: () => import(/* webpackChunkName: "minderEditor" */ '@/views/minder-editor'),
   },
+  {
+    path: '/overflow-tooltip',
+    name: 'overflowTooltip',
+    meta: { description: 'v-overflow-tooltip 指令' },
+    component: () => import(/* webpackChunkName: "overflowTooltip" */ '@/views/overflow-tooltip'),
+  },
   {
     path: '/set-height-adaptive',
     name: 'setHeightAdaptive',

src/views/home.vue

@@ -29,7 +29,7 @@
               @click.prevent
             />
           </el-tooltip>
-          <span>{{ row.meta.description }}</span>
+          <span>{{ row.meta && row.meta.description }}</span>
         </template>
       </el-table-column>
     </el-table>

src/views/overflow-tooltip.vue

@@ -0,0 +1,39 @@
+<!-- v-overflow-tooltip 指令 -->
+<template>
+  <div>
+    <h2>v-overflow-tooltip</h2>
+    <div>
+      <div>文本溢出（100px）：</div>
+      <span
+        v-overflow-tooltip="content"
+        style="display: inline-block; width: 100px;"
+      />
+    </div>
+    <br>
+    <div>
+      <div>未溢出（1000px）：</div>
+      <span
+        v-overflow-tooltip="content"
+        style="display: inline-block; width: 1000px;"
+      />
+    </div>
+    <el-divider />
+    <h2>el-tooltip</h2>
+    <el-tooltip
+      :content="content"
+    >
+      <span>{{ content }}</span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OverflowTooltipView',
+  data() {
+    return {
+      content: '这是一个超长的文本，用于测试 tooltip 的显示效果。',
+    }
+  },
+}
+</script>