基于antd vue的a-popover封装一下即可
js
<template>
<a-popover
v-model="visible"
trigger="none"
>
<template #content>
{{ text }}
</template>
<div
class="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>