关于javascript:元素内文字超长时显示并通过title提示全部文字

思路：

鼠标移入时，通过比拟元素的scrollWidth和offsetWidth来判断标签文字是否超长

若是超长，设置元素的title属性

在Vue中能够把逻辑抽取为自定义指令不便的应用

main.js:

// 注册一个全局自定义指令 `v-title`
Vue.directive('title', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    let { value } = binding;
    el.addEventListener('mouseenter', function(event) {
      console.log('el.scrollWidth ', el.scrollWidth)
      console.log('el.offsetWidth ', el.offsetWidth)
      if (el.scrollWidth > el.offsetWidth) {
        el.title = value
      } else {
        el.title = ''
      }
    })
  },
})

yourComponent.vue:

<div class="item-label"
    v-title="item.name"
>
    {{ item.name }}
</div>

css:

.item-label {
    display: block;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
}