<template>
<div
class
="ellipsis-container"
ref
="container"
:class
="{ 'has-tooltip': showTooltip }"
@mouseenter
="handleMouseEnter"
@mouseleave
="handleMouseLeave"
>
<div
ref
="content"
class
="ellipsis-content"
:class
="[singleLine ? 'ellipsis-single' : 'ellipsis-multi']"
:style
="{ '--lines': lines }"
>
<slot>{{ content }}</slot>
</div>
<div
v-if
="showTooltip"
class
="custom-tooltip"
:style
="tooltipStyle"
>
{{ content }}
</div>
</div>
</template>
<script>
export default {
name: 'TextOverflow',
props: {
// 文本内容
content: {
type: String,
default: ''
},
// 是否单行显示（默认多行）
singleLine: {
type: Boolean,
default: false
},
// 多行显示时的行数
lines: {
type: Number,
default: 3
},
// tooltip最大宽度
tooltipMaxWidth: {
type: String,
default: '4
00px'
}
},
data(
) {
return {
showTooltip: false,
tooltipStyle: {
maxWidth:
this.tooltipMaxWidth
}
};
},
mounted(
) {
this.checkOverflow(
);
window.addEventListener('resize',
this.checkOverflow
);
},
beforeDestroy(
) {
window.removeEventListener('resize',
this.checkOverflow
);
},
methods: {
// 检测文本是否溢出
checkOverflow(
) {
if (!
this.$refs
.content
) return;
if (
this.singleLine
) {
this.showTooltip
= this.$refs
.content
.scrollWidth >
this.$refs
.content
.clientWidth;
} else {
const lineHeight
= parseInt(getComputedStyle(
this.$refs
.content
).lineHeight
);
const maxHeight
= lineHeight *
this.lines;
this.showTooltip
= this.$refs
.content
.scrollHeight > maxHeight;
}
},
// 鼠标移入处理
handleMouseEnter(
) {
if (
this.showTooltip
) {
// 动态计算tooltip位置（防止超出视口）
const rect
= this.$refs
.container
.getBoundingClientRect(
);
this.tooltipStyle
= {
...this.tooltipStyle,
left: '
0',
top: 'calc(1
00% + 8px
)',
maxWidth:
this.tooltipMaxWidth
};
}
},
handleMouseLeave(
) {
// 不需要额外处理
}
},
watch: {
content(
) {
this.$nextTick(
this.checkOverflow
);
},
lines(
) {
this.$nextTick(
this.checkOverflow
);
}
}
};
</script>
<style scoped>
.ellipsis-container {
position: relative;
cursor: default;
}
.ellipsis-single {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ellipsis-multi {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: var(--lines, 3
);
}
.custom-tooltip {
position: absolute;
background: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
z-index: 1
000;
box-shadow:
0 4px 12px rgba(
0,
0,
0,
0.15
);
white-space: normal;
word-break: break-word;
opacity:
0;
transform: translateY(1
0px
);
transition: opacity
0.3s, transform
0.3s;
pointer-events: none;
}
.has-tooltip:hover
.custom-tooltip {
opacity: 1;
transform: translateY(
0);
}
</style>
怎么控制文字的宽度？
本文介绍Vue中$nextTick方法的应用场景，通过实例演示如何利用$nextTick确保DOM更新后执行特定操作。示例中，$nextTick被用来初始化名为orgAddOrUpdate的组件，确保在其DOM更新后正确调用了组件内的init方法。
扫一扫
8215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
