当前位置：首页 > VUE

vue实现文字折叠

2026-02-19 14:16:10VUE

Vue 实现文字折叠功能

文字折叠功能通常用于长文本的展示与隐藏，以下提供几种实现方式：

使用 v-show 或 v-if 控制显示

通过按钮切换布尔值来控制文本的显示与隐藏：

<template>
  <div>
    <p v-show="isExpanded">{{ longText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      longText: '这里是需要折叠的长文本内容...'
    }
  }
}
</script>

结合 CSS 过渡效果

添加过渡效果使折叠/展开更平滑：

<template>
  <div>
    <div class="text-container" :class="{ 'collapsed': !isExpanded }">
      <p>{{ longText }}</p>
    </div>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

<style>
.text-container {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.text-container.collapsed {
  max-height: 60px;
}
</style>

使用第三方组件

安装 vue-text-collapse 等现成组件：

npm install vue-text-collapse

<template>
  <text-collapse :text="longText" :length="100"/>
</template>

<script>
import TextCollapse from 'vue-text-collapse'

export default {
  components: { TextCollapse },
  data() {
    return {
      longText: '...'
    }
  }
}
</script>

动态计算文本高度

对于需要精确控制显示行数的情况：

<template>
  <div>
    <p ref="text" :class="{ 'line-clamp': !isExpanded }">{{ longText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

<style>
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

以上方法可根据具体需求选择使用，纯 CSS 方案性能更好，而 JavaScript 方案提供更精确的控制能力。

vue实现文字折叠