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