Vue中为大段文本添加渐进式显示动画的最佳方案探讨

针对你需要的静态文档段落逐步显示需求，结合Vue组件化与关注点分离的理念，最优方案是改进你最初的方案1——封装可复用的ProgressiveReveal组件，通过控制插槽内容的渲染范围实现渐进显示，既保留内容与逻辑分离，又解决了插槽立即渲染的问题。

实现步骤 #

1. 封装ProgressiveReveal组件 #

这个组件负责处理渐进显示的逻辑，同时通过插槽接收需要显示的内容：

<script setup>
import { ref, computed, useSlots } from 'vue'

// 接收自定义配置：初始显示数量、按钮文本
const props = defineProps({
  initialCount: {
    type: Number,
    default: 1
  },
  buttonText: {
    type: String,
    default: '阅读更多'
  }
})

// 控制已显示的内容数量
const revealedCount = ref(props.initialCount)
const slots = useSlots()

// 计算当前需要渲染的插槽节点
const visibleContent = computed(() => {
  const defaultSlotNodes = slots.default?.() || []
  // 只返回前revealedCount个节点
  return defaultSlotNodes.slice(0, revealedCount.value)
})

// 判断是否还有未显示的内容
const hasMore = computed(() => {
  const totalNodes = slots.default?.().length || 0
  return revealedCount.value < totalNodes
})

// 点击按钮显示更多内容
const revealMore = () => {
  const totalNodes = slots.default?.().length || 0
  if (revealedCount.value < totalNodes) {
    revealedCount.value++
  }
}
</script>

<template>
  <div class="progressive-reveal">
    <!-- 渲染可见的内容节点 -->
    <component 
      v-for="(node, idx) in visibleContent" 
      :key="idx" 
      :is="node" 
    />
    <!-- 仅当有更多内容时显示按钮 -->
    <button 
      v-if="hasMore" 
      @click="revealMore" 
      class="progressive-reveal__btn"
    >
      {{ buttonText }}
    </button>
  </div>
</template>

<style scoped>
.progressive-reveal__btn {
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  background-color: #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.progressive-reveal__btn:hover {
  background-color: #ddd;
}

/* 可选：添加渐入动画增强体验 */
.progressive-reveal > * {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

2. 父组件中使用该组件 #

父组件只需专注于内容本身，直接将需要渐进显示的段落传入插槽即可，完全保留语义化HTML结构：

<script setup>
import ProgressiveReveal from "@/components/ProgressiveReveal.vue"; 
</script>

<template>
  <p>Introduction text in future maybe</p>
  
  <ProgressiveReveal>
    <p>Long paragraph A</p>
    <p>Long paragraph B</p>
    <p>Long paragraph C</p>
    <!-- 新增段落直接添加即可，组件会自动识别，无需修改逻辑 -->
    <p>Long paragraph D</p>
  </ProgressiveReveal>
  
  <p>Following text</p>
</template>

如果需要自定义初始显示数量或按钮文本，只需传入props：

<ProgressiveReveal initialCount="2" buttonText="显示更多内容">
  <!-- 内容 -->
</ProgressiveReveal>

方案优势 #

1. 严格的关注点分离：所有静态内容保留在父组件模板中，交互逻辑完全封装在ProgressiveReveal组件内，符合你熟悉的MVC开发习惯。
2. 高度可复用：组件可以在任何需要渐进显示内容的场景中使用，支持段落、列表项等多种元素类型。
3. 灵活扩展：新增内容时只需在插槽中添加节点，无需修改硬编码的数值或逻辑代码，解决了方案3的痛点。
4. 符合Vue理念：遵循组件化、声明式渲染的核心思想，同时避免了方案2中将内容放在逻辑层的不合理做法。

对原有方案的改进说明 #

• 方案1的问题解决：通过useSlots()获取插槽节点，结合计算属性控制渲染范围，避免了插槽内容全部立即渲染的问题，同时保留了插槽的内容传递方式。
• 方案2的问题规避：无需将HTML文本存放在script中，内容全部在模板中维护，保持语义化和可维护性。
• 方案3的问题解决：无需手动为每个段落添加v-if和硬编码条件，组件自动计算内容总数和显示状态。

内容的提问来源于stack exchange，提问作者fooquency