改造el-tooltip，使其支持“文字溢出时显示，不溢出则不显示”

        有时候为了排版好看，会对元素设置文字溢出隐藏，当鼠标悬停时再显示完整内容。虽说可以用title属性来实现，但是存在两个问题：第一就是不好看；第二就是文字不溢出时也会显示（强迫症不喜）。

        第一点好解决，使用第三方ui框架嘛，例如本文使用的el-tooltip； 但是第二个问题在第三方框架上也许也存在（例如本文使用的el-tooltip）。

        虽然el-tooltip提供了一个disabled属性可以禁用tooltip的显示。但是还得在data里设置flag；还得写鼠标移入事件来判断文字是否溢出，过于繁琐。于是我尝试着改写了el-tooltip，在原先的基础上追加了一个名为“overflow”的props（名称随意，但注意别和原版的重名），若设置了此属性则只会在文字溢出时显示tooltip。

首先看效果：

此时文字未溢出，则鼠标悬浮不出现tooltip

当文字溢出时则显示

实现思路：改写el-tooltip的源码（但是不能改的太离谱，这里就加了个props，改写了show方法） 

实现过程：

1.在项目的utils文件夹中新建一个“rewriteElTooltip”文件，内容如下：

export default function rewriteElTooltip(el) {
    el.props = {
        ...el.props,
        overflow: Boolean // 为el-tooltip追加名为'overflow'的props属性
    }
    el.methods = {
        ...el.methods,
        // 重写el-tooltip的show方法
        show() {
            // 如果设置了overflow，则判断文字是否溢出，若未溢出则不显示tooltip
            if (this.overflow) {
                if (this.$el.scrollWidth <= this.$el.clientWidth) return
            }
            // el-tooltip自带的，保留
            this.setExpectedState(true);
            this.handleShowPopper();
        }
    }
}

 2.在项目的main.js里引入并改写el-tooltip：

// ...其他配置

import ElementUI, {Tooltip} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import rewriteElTooltip from "@/utils/rewriteElTooltip"; // 引入重写el-tooltip的方法

rewriteElTooltip(Tooltip) // 重写el-tooltip的方法 注意一定要放在 Vue.use(ElementUI); 之前

Vue.use(ElementUI);

// ...其他配置

如果你担心这样全局改写会污染全局，那么还可以使用组件继承的形式来实现

代码如下：

<script>
import {Tooltip} from 'element-ui'

export default {
  name: "text-overflow",
  extends: Tooltip, // 组件继承
  props: {
    ...Tooltip.props,
    overflow: Boolean // 新增props属性
  },
  methods: {
    // 重写show方法
    show() {
      // 执行文字溢出判断逻辑
      if (this.overflow) {
        if (this.$el.scrollWidth <= this.$el.clientWidth) return
      }
      Tooltip.methods.show.call(this) //执行原版的逻辑，绑定当前实例的this
    }
  }
}
</script>

使用起来跟el-tooptip是一样的，只是新增了个“overflow”配置

以上就是实现思路和过程了， 希望可以帮到各位！