【前端】文本超长显示省略号封装一下

背景：
以往的文本超长采用css + element-ui Tooltip组件展示。这种方式有个显示问题，当文本不超出时，鼠标移入也会提示对应的tooltip框。基于这个背景，进行优化
思路：
采用 element-ui Popover组件配合鼠标移入移出事件的事件对象clientHeight 和scrollHeight作对比（＜时代表未超出）可控制Popover组件显示隐藏

<div>
    <div class="text" @mouseenter="show" @mouseleave="hide">{{text}}</div>
    <el-popover placement="bottom" title="标题" width="200" trigger="manual" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" v-model="visible">  
        <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
        <span class="text" @mouseenter="show" @mouseleave="hide">{{text}}</span>
    </el-popover>
</div>
<script>
export default { 
   props:['text'],
   data() {
        return {
            visible: false 
        }; 
   },
   methods:{
       show(event){
           if(event.target.clientHeight < event.target.scrollHeight){
               // 注：scrollHeight指整个元素的高度，与元素本身有关， 与overflow:hidden等属性无关，
               //与是否在可视范围内无关，所以以此和元素视口高度比较对比是否 ...显示了
               this.hide() return
           }
           this.visible = true
       },
       hide(event){
           setTimeout(()=>{this.visible = false},300)
       },
   }
}; 
</script>
<style>
  //常规css 超长显示...
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
</style>