Vue 给表格单元格加省略号和hover提示

基于antd vue的a-popover封装一下即可

<template><a-popoverv-model="visible"trigger="none"><template #content>{{ text }}</template><divclass="ellipsis"@mouseenter="onMouseenter"@mouseleave="onMouseleave">{{ text }}</div></a-popover>
</template><script setup>
import { defineProps, ref } from 'vue';defineProps({text: {type: String,default: '',},
});const visible = ref(false);const checkOverflow = element => element.scrollWidth > element.clientWidth;let cancelEnter = true;
let cancelLeave = true;const onMouseenter = (e) => {cancelEnter = false;cancelLeave = true;setTimeout(() => {if (!cancelEnter) {visible.value = checkOverflow(e.target);}}, 100);
};const onMouseleave = () => {cancelLeave = false;cancelEnter = true;setTimeout(() => {if (!cancelLeave) {visible.value = false;}}, 120);
};</script><style lang="less">
.ellipsis {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>