Vue 提示框组件（有值时鼠标悬浮显示对应内容，无值时只显示'-

定义组件：

<show-tip
    :content="source.softVersionName ? source.softVersionName : '-'"
   class="wid190"
   refName="software"
 />

在代码中引用该组件

<template>
 <div class="text-tooltip">
   <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
     <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
       <span :style="{color}" :ref="refName">{{content||'-'}}</span>
     </p>
   </el-tooltip>
 </div>
</template>

<script>
 export default {
   name: 'textTooltip',
   props: {
     color: {
       type: String,
       default: ''
     },
     // 显示的文字内容
     content: {
       type: String,
       default: () => {
         return ''
       }
     },
     // 外层框的样式，在传入的这个类名中设置文字显示的宽度
     className: {
       type: String,
       default: () => {
         return ''
       }
     },
     // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
     refName: {
       type: String,
       default: () => {
         return ''
       }
     }
   },
   data() {
     return {
       isShowTooltip: true
     }
   },
   methods: {
     onMouseOver(str) {
       let parentWidth = this.$refs[str].parentNode.offsetWidth;
       let contentWidth = this.$refs[str].offsetWidth;
       // 判断是否开启tooltip功能
       if (contentWidth>parentWidth) {
         this.isShowTooltip = false;
       } else {
         this.isShowTooltip = true;
       }
     }
   }
 }
</script>

<style lang="scss" scoped>
.over-flow {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}
.wid190 {
   width: 100%;
}
p{
   margin: 0;
}
</style>