真香系列：vue 文字省略隐藏并悬浮显示

注册全局指令

// main.js 里面
import popover from './directive/popover';
Vue.use(popover);

用法

<div class="toel" :title="news.content" v-popover>{{news.content}}</div>

提示框（全局唯一）

<!-- 悬浮提示框 -->
<div class="custome-popover" style="position: absolute;padding: 4px;font-size: 12px;border: 1px solid #999;background: #fff; z-index:9999;"></div>

源码

function calcPopover(el, binding) {
  const dom = document.querySelector('.custome-popover');
  el.onmouseover = function() {
    dom.innerText = this.title;
    dom.style.display = 'block';
    // 备份title
    this.bakTitle = this.title;
    // 去除title属性，避免默认效果
    this.removeAttribute('title');
  };
  el.onmouseout = function() {
    dom.style.display = 'none';
    // 恢复title属性
    this.title = this.bakTitle;
  };
  el.onmousemove = function(e) {
    const left = dom.clientWidth / 2;
    e = e || window.event;
    // 跟随：改变details的top,left
    dom.style.left = e.clientX - left + 'px';
    const top = binding.value === 'top' ? e.clientY - 32 : e.clientY + 32;
    dom.style.top = top + 'px';
  };
}
// 没有超出的移除title避免默认效果
function removePopover(el) {
  el.onmouseover = function() {
    this.removeAttribute('title');
    el.onmouseover = null;
  };;
  el.onmouseout = null;
  el.onmousemove = null;
}
function sameFunc(el, binding) {
  if (el.scrollWidth > el.clientWidth) {
    if (el.tempCalcPopover) { // 存在则不再添加事件
      return;
    }
    el.tempCalcPopover = calcPopover;
    el.tempCalcPopover(el, binding);
  } else {
    el.tempCalcPopover = null;
    removePopover(el);
  }
}
const popover = {
  
  // 添加inserted解决componentUpdated 和 updated 存在动态数据问题
  inserted: (el, binding)=>{
    sameFunc(el, binding);
  },
  // componentUpdated 和 updated 存在动态数据问题每次都是一开始的值，不会渲染新增的值
  componentUpdated: function(el, binding) {
    sameFunc(el, binding);
  },
  unbind: function(el) {
    el.tempCalcPopover = null;
  }
};

const install = function(Vue) {
  Vue.directive('popover', popover);
};

if (window.Vue) {
  window.permit = popover;
  Vue.use(install); // eslint-disable-line
}
popover.install = install;
export default popover;