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;
}封装组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script setup lang="ts">
import { ref } from 'vue'
defineOptions({
name: 'EPTooltip',
})
const showTooltip = ref(true)
function onMouseEnter(e: any, el?: any) {
el = el ?? e.target
showTooltip.value = !(el.offsetWidth < el.scrollWidth)
}
</script>
<template>
<el-tooltip placement="top" effect="light" :disabled="showTooltip" :persistent="false"
popper-class="max-w-300 break-all" v-bind="$attrs">
<slot :mouseenter="onMouseEnter" />
<template #content>
<slot name="content" />
</template>
</el-tooltip>
</template>