vue+elemen 实现el-tooltip在文本超出区域后浮现

前言

最近在做一个vue+element的项目，遇到的一些难搞的需求。
关于<el-tooltip>的使用想必也不用我多说了，官方文档是相当的详细，基本使用自己去饿了么官网看。

具体需求

由于我的内容是循环生成的，字体的多少，并不是一个定值，如果仅使用官方的<el-tooltip>组件的话，岂不是包着的每一个div都会有这个tooltip，结果导致一整个页面的tooltip，体验特别不好。而且整个页面生成了上百个<el-tooltip>标签，占用了大量的资源。

解决方案

方案一

刚开始在网上翻找解决方案，找到一个别人将tooltip组件二次封装，好用确实是好用，但是同样会生成大量的tooltip标签，遂放弃。

方案二

后来，我想到了一个我用过的表格属性——:show-overflow-tooltip=“true”——在表格组件中，某一个单元格中的内容超过了该单列的列宽，会隐藏多余部分，通过…展示。并且将鼠标移入即可查看该单元格内的完整内容。效果如图：

而鼠标放到文字没超出列宽的地方则不显示 tooltip，神奇的是，整个页面，只生成了一个<el-tooltip>标签，无论有多少内容，永远只有一个<el-tooltip>存在，大大节省了资源。于是翻看源码看他是怎么实现该功能的。

具体方法

1.先在页面上定义一个tooltip标签

<el-tooltip ref="tooltip" :content="tooltipContent" />

此标签就是要在页面中生成的那个唯一的<el-tooltip>标签。

2.在文字区域的父标签上添加鼠标移入移除方法

					   <div
                           class="card-carousel--card--footer"
                           @mouseenter="handleDivMouseEnter($event)"
                           @mouseleave="handleDivMouseleave($event)"
                         >
                           <p class="topicStyle"> {
   {
    info } </p>
	                   </div>

前提是：承载内容的标签需要有一个class。若要在组件标签上添加方法，应该是要添加【.native】的。

3.引入需要的方法

import debounce from 'throttle-debounce/debounce'