1.需求:需要实现文本单行显示,超出时,使用省略号,划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取,只有溢出文本鼠标滑过时显示全部文本,没有溢出的则不需要。
2.实现:
第一步:首先要判断文本是否溢出
这里网上可以找到很多方法,我是用scrollWidth去拿到实际文本长度,跟clientWidth文本可视宽度作比较。需要注意的是我遇到了一个问题,即
判断文本溢出之前一定要使用单行文件溢出显示省略号的css,并且要加在tooltip内部要溢出隐藏的span上,不然scrollWidth和clientWidth会一直为0
onMouseOver(event) {
const ev = event.target;
const evWeight = ev.scrollWidth;
const contentWidth = ev.clientWidth;
if (evWeight > contentWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
},
<el-row v-for="(row, rowIndex) in djnumberOfRows" :key="rowIndex">
<el-col
v-for="(column, colIndex) in row.length"
:key="colIndex"
:span="
calculateSpan(row, rowIndex, djnumberOfRows.length, colIndex)
"
>
<template v-if="row[colIndex]">
<el-form-item class="radioClass" :label="row[colIndex].name">
<el-tooltip
:content="djForm ? djForm[row[colIndex].fieldskey] : ''"
:disabled="isShowTooltip"
placement="top"
>
<div
@mouseover="onMouseOver($event)"
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
>
{{ djForm ? djForm[row[colIndex].fieldskey] : '' }} //之前我在这里包了一层span,是错误的,会导致拿到的不准,有的是0,有的地方不是,因为span有范围。为什么会在这加一层span,用div,因为省略号
</div>
</el-tooltip>
</el-form-item>
</template>
</el-col>
</el-row>
补充:(未试)
methods: {
onMouseOver (str) { // 内容超出,显示文字提示内容
const tag = this.$refs[str]
const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
const contentWidth = tag.offsetWidth // 获取元素可视宽度
this.isShowTooltip = contentWidth <= parentWidth
}
}