UI库-ElTooltip只在文字超出范围时显示的视线方式
ElTooltip只在文字超出范围时显示的视线方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<el-tooltip
effect="light"
:content="item.name"
placement="top"
:disabled="!item.isShowTooltip"
:offset="6"
popper-class="table-tooltip"
>
<div @mouseenter="isShowTooltipVisibilityChange($event,item,'isShowTooltip')" class="sle">
<span>{{item.name}}</span>
</div>
</el-tooltip>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<el-tooltip
effect="light"
:content="userStore.userInfo.name"
placement="top"
:disabled="!isShowTooltip"
:offset="6"
popper-class="table-tooltip"
>
<div @mouseenter="($event)=>isShowTooltip = isShowTooltipVisibilityChange($event)"
class="text-align-center sle w-full sle">
<span>名称:{{ userStore.userInfo.name }}</span>
</div>
</el-tooltip>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* 是否显示
* @param event $event
* @param row 当前数据
* @param prop 修改显示的字段名
* 使用方式 @mouseenter="isShowTooltipVisibilityChange($event,item)"
* @return boolean
*/
export function isShowTooltipVisibilityChange(
event: any,
row: any = null,
prop: string = "isShowTooltip"
) {
const ev = event.target;
const evWeight = ev.scrollWidth;
const contentWeight = ev.clientWidth;
const isShowTooltip = evWeight > contentWeight;
if (row) row[prop] = isShowTooltip;
return isShowTooltip;
}