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检测

四、实战案例演示

访问在线演示查看完整交互效果，包含以下特性：

1. 自动检测文本溢出
2. 平滑展开/收起动画
3. 响应式布局适配
4. TypeScript类型支持

最佳实践建议：

• 优先使用-webkit-line-clamp原生方案
• 复杂场景推荐使用@vueuse/core的useTextTruncate组合式API
• 搭配IntersectionObserver实现滚动加载优化

通过本文提供的解决方案，开发者可以快速实现高性能、高可用的文本溢出交互效果。建议直接复制示例代码到项目中调试，根据实际需求调整动画时间和行数配置参数。