<div class="sure-btn">
<div v-for="(item,index) in noticeUserIdArrayFront" :key="index">
<!-通过disabled属性来控制 el-tooltip 的显示->
<el-tooltip v-if="item.orgName" class="item" effect="dark" :content="item.orgName" :disabled="isShowTooltip" placement="top">
<div class="sure-text" @mouseover="onMouseOver(index)">
<span class="sure-text2">{
{item.orgName}}</span>
</div>
</el-tooltip>
</div>
</div>
<script>
export default {
data() {
return {
noticeUserIdArrayFront: [],
isShowTooltip: true
}
},
methods: {
onMouseOver(index) {
let contentWidth = 0;
let parentWidth = 0;
this.$nextTick(() => {
// querySelectorAll 返回的是一个数组
// querySelector 返回的是一个对象
// 因为我们上面是循环的,所以contentWidth获取的是一个数组,我们要根据索引获取对应内容的宽度
contentWidth = document.querySelectorAll('.sure-text2')[index].offsetWidth // 内容宽度
// 这里父级宽度是固定的,就不用循环了(也是可以循环的)
parentWidth = document.querySelector('.sure-text').offsetWidth // 父级宽度
if (contentWidth > parentWidth) {
this.isShowTooltip = false
} else {
this.isShowTooltip = true
}
})
}
.sure-text {
width: 210px; // 固定的宽度
padding: 6px;
background-color: #e6e6e6;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
margin: 6px;
}