element Plus 中el-tooltip 和 el-popover超出宽度,高度显示文字提示 否则不提示
说明:设置固定宽度。
文字超出宽度,用...显示。鼠标悬停到文字上,用el-tooltip显示全部文字内容
如果文字未超出宽度,el-tooltip、el-popover隐藏。
html:
1 <el-tooltip :content="node.label" placement="bottom" effect="light" :disabled="isShowTooltip"> 2 <span class="treeLabel" @mouseenter="visibilityChange($event)"> {{ node.label }}</span> 3 </el-tooltip> 4 5 <!--或者--> 6 <!--<el-popover :content="item.remark" :width="320" trigger="hover" placement="bottom" :disabled="isShowTooltip"> 7 <template #reference> 8 <div class="remark" @mouseenter="visibilityChange($event)">{{ item.remark }}</div> 9 </template> 10 </el-popover>-->
js:
1 const isShowTooltip = ref(false) 2 3 // 是否显示tip 根据宽度 4 function visibilityChange (event) { 5 const ev = event.target 6 const evWeight = ev.scrollWidth 7 const contentWeight = ev.clientWidth 8 if (evWeight > contentWeight) { 9 // 实际宽度 > 可视宽度 文字溢出 10 isShowTooltip.value = false 11 } else { 12 // 否则为不溢出 13 isShowTooltip.value = true 14 } 15 } 16 17 // 是否显示tip 根据高度 18 function visibilityChange (event) { 19 const ev = event.target 20 const evWeight = ev.scrollHeight 21 const contentWeight = ev.clientHeight 22 console.log(ev,evWeight,contentWeight) 23 24 if (evWeight > contentWeight) { 25 // 实际宽度 > 可视宽度 文字溢出 26 isShowTooltip.value = false 27 } else { 28 // 否则为不溢出 29 isShowTooltip.value = true 30 } 31 }
css:
.treeLabel ,.remark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
https://www.jianshu.com/p/b39d2124d911