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

 

posted @ 2023-04-04 10:57  虚无——缥缈  阅读(2137)  评论(0编辑  收藏  举报