当前位置：首页 > VUE

vue实现文本折叠

2026-03-29 16:41:36VUE

实现文本折叠的基本思路

文本折叠功能通常用于长文本内容的展示与隐藏切换，核心逻辑是通过控制CSS样式或DOM元素的显示/隐藏状态实现。Vue中可通过数据绑定和条件渲染实现这一效果。

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

通过响应式数据控制文本容器的显示状态：

vue实现文本折叠

<template>
  <div>
    <p v-if="!isCollapsed">{{ longText }}</p>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
  </div>
</template>

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

添加过渡动画效果

通过Vue的transition组件实现平滑的展开/折叠动画：

<template>
  <div>
    <transition name="fade">
      <p v-show="!isCollapsed" class="content">{{ longText }}</p>
    </transition>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, max-height 0.5s;
  max-height: 1000px;
  overflow: hidden;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
</style>

实现多行文本省略

结合CSS实现"显示更多"效果：

vue实现文本折叠

<template>
  <div>
    <p :class="{ 'collapsed-text': isCollapsed }">{{ longText }}</p>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '显示全部' : '收起' }}
    </button>
  </div>
</template>

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

动态计算文本高度

对于需要精确控制显示行数的场景，可使用计算属性动态判断：

<template>
  <div ref="container">
    <p :style="{ height: contentHeight }">{{ longText }}</p>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: true,
      fullHeight: 'auto'
    }
  },
  computed: {
    contentHeight() {
      return this.isCollapsed ? '60px' : this.fullHeight
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.fullHeight = `${this.$refs.container.scrollHeight}px`
    })
  }
}
</script>