Vue3如何优雅实现多行文本溢出展开收起交互？
在移动端和后台管理系统开发中，多行文本溢出处理是高频需求场景。传统CSS方案存在浏览器兼容性差、扩展性弱等问题。本文将结合Vue3的响应式特性与现代化CSS技术，教你实现丝滑的展开收起交互效果，并附带可直接复用的组件化解决方案。
一、多行文本溢出核心实现方案
1.1 CSS Clamp基础方案
关键代码示例：
.text-clamp {
display: -webkit-box;
-webkit-line-clamp: 3; / 控制显示行数 /
-webkit-box-orient: vertical;
overflow: hidden;
}
该方案存在两大局限：无法精确控制截断字符、展开时会出现布局跳动。需要配合Vue3的动态绑定实现优化。
1.2 Vue3响应式解决方案
通过computed属性动态计算文本状态：
const isClamped = computed(() => {
return element.value.scrollHeight > element.value.clientHeight
})
配合transition组件实现动画过渡：
<transition name="expand">
<div v-if="isExpanded" class="full-text">{{ content }}</div>
</transition>
二、丝滑交互的优化技巧
2.1 智能高度检测方案
通过ResizeObserver API实现动态行数检测：
const observer = new ResizeObserver(entries => {
entry.target.dataset.truncated = entry.target.scrollHeight > entry.target.clientHeight
})
observer.observe(textContainer.value)
2.2 过渡动画优化
使用max-height动态过渡代替直接显示：
.expand-enter-active {
transition: max-height 0.3s ease-out;
}
.expand-leave-active {
transition: max-height 0.25s ease-in;
}
三、完整组件化实现
3.1 可复用组件代码
<template>
<div class="text-container">
<div ref="content" :class="{ 'text-clamp': !expanded }">
{{ content }}
</div>
<button
v-if="showToggle"
@click="toggleExpand"
class="toggle-btn"
>
{{ expanded ? '收起' : '展开' }}
</button>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const props = defineProps({
content: String,
maxLines: { type: Number, default: 3 }
})
const content = ref(null)
const expanded = ref(false)
const showToggle = ref(false)
onMounted(() => {
checkTextOverflow()
})
const checkTextOverflow = () => {
showToggle.value = content.value.scrollHeight > content.value.clientHeight
}
const toggleExpand = () => {
expanded.value = !expanded.value
}
</script>
3.2 性能优化建议
- 防抖处理：窗口resize时添加200ms防抖
- 虚拟滚动：超长文本使用vue-virtual-scroller优化
- SSR兼容：在服务端渲染时禁用ResizeObserver检测
四、实战案例演示
访问在线演示查看完整交互效果，包含以下特性：
- 自动检测文本溢出
- 平滑展开/收起动画
- 响应式布局适配
- TypeScript类型支持
最佳实践建议：
- 优先使用-webkit-line-clamp原生方案
- 复杂场景推荐使用@vueuse/core的useTextTruncate组合式API
- 搭配IntersectionObserver实现滚动加载优化
通过本文提供的解决方案，开发者可以快速实现高性能、高可用的文本溢出交互效果。建议直接复制示例代码到项目中调试，根据实际需求调整动画时间和行数配置参数。
正文完
