前言：
el-tooltip组件本身就是悬浮提示功能，在对它进行二次封装时，要对它进行优化，实现超出的文本加提示，没超出的不给予提示。
- 思路：加一个中间层，子集为数据全量，控制中间层的样式，并设置宽度，通过 ref 进行宽度对比，若子集比中间层更宽，既说明显示了...样式
<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 :ref="refName">{{content||'-'}}</span>
</p>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'textTooltip',
props: {
// 显示的文字内容
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>
- 在需要用到组件的页面中引入
import tooltipOver from './components/tooltipOver'
- 使用组件
<tooltip-over
:content="tipText"
class="wid190"
refName="tooltipOver"
></tooltip-over>
tip：当同一页面使用多次组件时，需要定义不同的refName属性
感谢博客 https://www.cnblogs.com/97pkp/p/12895693.html
还有一种思路：在文本溢出时需要对文本进行处理；相对于一定高度的容器，溢出容器部分的文本显示省略号，同时，鼠标移入通过显示tooltip来显示文本的具体内容。
详情请见 https://www.jianshu.com/p/239d0d446587
如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
