关于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;
}