Vue tooltip 组件封装(动态地控制tooltip的显示，如果内容能够完全显示在父元素中，则不需要使用tooltip)

Vue tooltip 组件封装

开发中经常遇到需要超出文本省略的需求，切鼠标移入要显示全部内容，虽然这个用传统的 title 可以实现，但是样式不美观

<div title='123'>123</div>

elemntUI 就给提供了 Tooltip 文字提示,样式比较美观，展示方式也不少

<el-tooltip
  class='item'
  effect='dark'
  content='Top Left 提示文字'
  placement='top-start'
>
  <el-button>上左</el-button>
</el-tooltip>

但是做页面的时候我们一般要求超出隐藏才显示提示框，这是就需要自己来封装一个组件来实现了（这边仍旧引入了 elementUI 的 tooltip，但是增加了一些判断，结合disabled属性进行显示或者不显示）】

1. 首先我们创建一个名为 commonTooltip.vue 的文件

• .none-label中的文字是处于隐藏状态，切不换行，主要是用来和文字本身盒子的宽度做比较
• 父盒子和子盒子ref使用传参主要是怕同一个页面引入该组件时ref一样导致错乱
• oneLine主要是用来判断单行超出显示隐藏是是否显示提示框,否则超出两行显示提示框

2. 页面引入及使用