vue+Element 项目中使用el-tooltip时,想要el-tooltip能够自适应宽度,当页面放大能够展示完整时隐藏提示文字,当页面缩小文本展示不全时再显示提示文字,展示信息效果如下:
显示完整效果(鼠标触摸无提示文字):
显示不全效果(鼠标触摸会有提示文字):
HTML结构:
<el-row>
<el-col :span="8" class="my-col">
<div>姓名:</div>
<el-tooltip
effect="dark"
:content="name"
placement="top"
:disabled="showTooltip"
>
<div class="overflow" @mouseover="onMouseOver('name')">
<span class="label" :ref="'name'">{{ name }}</span>
</div>
</el-tooltip>
</el-col>
<el-col :span="8" class="my-col">
<span class="value">年龄:</span>
<span class="label">{{ age }}</span>
</el-col>
<el-col :span="8" class="my-col">
<div class="value">微信号:</div>
<el-tooltip
effect="dark"
:content="wxNumber"
placement="top"
:disabled="showTooltip"
>
<div class="overflow" @mouseover="onMouseOver('wxNumber')">
<span class="label" :ref="'wxNumber'">{{ wxNumber }}</span>
</div>
</el-tooltip>
</el-col>
<el-col :span="8" class="my-col">
<div class="value">所在区域:</div>
<el-tooltip
effect="dark"
:content="area"
placement="top"
:disabled="showTooltip"
>
<div class="overflow" @mouseover="onMouseOver('area')">
<span class="label" :ref="'area'">{{ area }}</span>
</div>
</el-tooltip>
</el-col>
<el-col :span="8" class="my-col">
<div class="value">详细地址:</div>
<el-tooltip
effect="dark"
:content="address"
placement="top"
:disabled="showTooltip"
>
<div class="overflow" @mouseover="onMouseOver('address')">
<span class="label" :ref="'address'">{{ address }}</span>
</div>
</el-tooltip>
</el-col>
</el-row>
js代码:
export default {
data() {
return {
showTooltip: false
}
},
methods: {
// 鼠标移动到元素上检验内容超出显示tooltip提示文字
onMouseOver(refName) {
this.showTooltip = false
const node = this.$refs[refName]
const parentWidth = node.parentNode.offsetWidth
const contentWidth = node.offsetWidth
this.showTooltip = contentWidth <= parentWidth
}
}
}
样式代码:
<style lang="scss" scoped>
.my-col {
display: flex;
margin-bottom: 12px;
padding-right: 8px;
}
.overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>