vue封装自定义指令之动态显示title（如果溢出了显示，不溢出则不显示）

vue项目开发的过程中，如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话，可以封装一个自定义的指令。

方法一、

组件内代码如下：

  directives: {
    title: {
      inserted(el) {
        const { clientWidth, scrollWidth, title } = el;
        if (!title && scrollWidth > clientWidth) el.title = el.innerText;
      }
    }
  },

使用：

修修的铁拳修修的铁拳修修的铁拳修修的铁拳修修的铁拳

方法二、

或者鼠标进入后dom后方法处理，方法如下：

    titeEnter(e) {
      const target = e.target;
      const { clientWidth, scrollWidth, title } = target;
      if (!title && scrollWidth > clientWidth) target.title = target.innerText;
    },

使用：

  
修修的铁拳修修的铁拳修修的铁拳修修的铁拳修修的铁拳