94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<el-tooltip :disabled="!isOverflow" effect="light" placement="top" :content="text">
|
||
|
|
<div
|
||
|
|
ref="containerRef"
|
||
|
|
class="multi-line-ellipsis"
|
||
|
|
:style="containerStyle"
|
||
|
|
@mouseenter="handleMouseEnter"
|
||
|
|
@mouseleave="handleMouseLeave"
|
||
|
|
>
|
||
|
|
<slot>
|
||
|
|
{{ text }}
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
</el-tooltip>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { computed, type HTMLAttributes, nextTick, onMounted, ref } from 'vue'
|
||
|
|
import { ElTooltip } from 'element-plus'
|
||
|
|
|
||
|
|
// 定义组件 props 类型
|
||
|
|
interface Props {
|
||
|
|
text?: string
|
||
|
|
lines?: number
|
||
|
|
maxWidth?: string | number
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
text: '',
|
||
|
|
lines: 3,
|
||
|
|
maxWidth: '100%',
|
||
|
|
})
|
||
|
|
|
||
|
|
const isOverflow = ref(false)
|
||
|
|
const containerRef = ref<HTMLElement | null>(null)
|
||
|
|
|
||
|
|
// 计算容器样式
|
||
|
|
const containerStyle = computed(
|
||
|
|
() =>
|
||
|
|
({
|
||
|
|
maxWidth: props.maxWidth,
|
||
|
|
display: '-webkit-box',
|
||
|
|
WebkitBoxOrient: 'vertical',
|
||
|
|
WebkitLineClamp: props.lines,
|
||
|
|
overflow: 'hidden',
|
||
|
|
textOverflow: 'ellipsis',
|
||
|
|
lineHeight: '1.5',
|
||
|
|
wordBreak: 'break-all',
|
||
|
|
}) as HTMLAttributes['style'],
|
||
|
|
)
|
||
|
|
|
||
|
|
// 检查文字是否溢出
|
||
|
|
const checkOverflow = (element: HTMLElement): boolean => {
|
||
|
|
// 单行情况下使用宽度判断
|
||
|
|
if (props.lines === 1) {
|
||
|
|
return element.scrollWidth > element.clientWidth
|
||
|
|
}
|
||
|
|
// 多行情况下使用高度判断
|
||
|
|
else {
|
||
|
|
return element.scrollHeight > element.clientHeight
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 鼠标进入处理
|
||
|
|
const handleMouseEnter = (event: MouseEvent) => {
|
||
|
|
const element = event.target as HTMLElement
|
||
|
|
console.log(checkOverflow(element))
|
||
|
|
isOverflow.value = checkOverflow(element)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 鼠标离开处理
|
||
|
|
const handleMouseLeave = () => {
|
||
|
|
isOverflow.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// 初始化时检查溢出状态
|
||
|
|
onMounted(() => {
|
||
|
|
nextTick(() => {
|
||
|
|
if (containerRef.value) {
|
||
|
|
isOverflow.value = checkOverflow(containerRef.value)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.multi-line-ellipsis {
|
||
|
|
cursor: default;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
</style>
|