element-u i的文字提示实现文字省略时划过显示文字

最新推荐文章于 2023-04-13 15:46:53 发布

(´叾•_•屾)

最新推荐文章于 2023-04-13 15:46:53 发布

阅读量269

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/prototypeasda/article/details/127102765

版权

使用局部自定义指令实现

HTML：

<el-tooltip v-akTooltipAutoShow class="item" effect="dark" content="Top Center 提示文字" placement="top">

Javascript：

import Vue from 'vue'
import { getStyle } from 'element-ui/src/utils/dom'

使用自定义指令实现

directives: {
    akTooltipAutoShow: {
      inserted: function(el, binding, vnode) {
        el.addEventListener('mouseenter', function(e) {
          const defalutSilent = !!Vue.config.silent
          Vue.config.silent = true
          vnode.componentInstance.disabled = true
          const range = document.createRange()
          range.setStart(el, 0)
          range.setEnd(el, el.childNodes.length)
          const rangeWidth = Math.round(range.getBoundingClientRect().width)
          const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0)
          if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
            vnode.componentInstance.disabled = false
          }
          Vue.config.silent = defalutSilent
        })
      }
    }
  },