需求：
設(shè)置固定寬度。
文字超出寬度蛹稍，用...顯示吧黄。鼠標(biāo)懸停到文字上，用el-tooltip顯示全部文字內(nèi)容
如果文字未超出寬度稳摄，el-tooltip隱藏稚字。
解決方法：
html
<el-tooltip effect="dark"
:content="contentHover" // 第一步：鼠標(biāo)懸停后顯示的內(nèi)容
placement="top-end"
:disabled="isShowTooltip" // 第二步：關(guān)閉文字提示功能
>
<div class='linkTo' @mouseover="onMouseOver(name)"> // 第三步：鼠標(biāo)移入事件，很關(guān)鍵
<span :ref='name'>{{name}}</span>// 第四步 綁定ref
</div>
</el-tooltip>
data
data(){
return{
name: '這里是需要展示的所以文字內(nèi)容'厦酬，
isShowTooltip: false,
contentHover: '',
}
}
methods
methods:{
onMouseOver(str) { // 內(nèi)容超出胆描，顯示文字提示內(nèi)容
const tag = this.$refs[str]
const parentWidth = tag.parentNode.offsetWidth // 獲取元素父級(jí)可視寬度
const contentWidth = tag.offsetWidth // 獲取元素可視寬度
this.isShowTooltip = contentWidth <= parentWidth
// 鼠標(biāo)懸停后顯示的內(nèi)容
this.contentHover = this.name
}
}
css
.linkTo {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
