当前位置：首页 > VUE

vue 实现文字折叠

2026-02-19 22:47:34VUE

Vue 实现文字折叠的方法

在 Vue 中实现文字折叠功能可以通过动态控制 CSS 类或样式来实现。以下是几种常见的方法：

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

通过 Vue 的指令 v-show 或 v-if 可以轻松实现文字的折叠与展开。v-show 通过切换 display 属性控制显示，而 v-if 会直接移除或添加 DOM 元素。

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

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

使用 CSS `max-height` 过渡效果

如果需要平滑的折叠动画效果，可以通过动态设置 max-height 实现。初始时设置一个较小的 max-height，展开时设置为足够大的值。

<template>
  <div>
    <div 
      class="collapse-content" 
      :style="{ maxHeight: isCollapsed ? '100px' : '0' }"
    >
      {{ text }}
    </div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '收起' : '展开' }}
    </button>
  </div>
</template>

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

<style>
.collapse-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
</style>

使用第三方库（如 `vue-collapse`）

如果需要更复杂的功能（如多级折叠），可以使用第三方库如 vue-collapse。

安装：

npm install vue-collapse

使用：

<template>
  <div>
    <vue-collapse v-model="isCollapsed">
      <div>{{ text }}</div>
    </vue-collapse>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '收起' : '展开' }}
    </button>
  </div>
</template>

<script>
import { VueCollapse } from 'vue-collapse';

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

动态截断文本

如果只需要部分显示文本，可以通过计算属性动态截断内容。

<template>
  <div>
    <p>{{ displayedText }}</p>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '收起' : '展开' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      text: '这里是需要折叠的长文本内容...',
      maxLength: 50
    };
  },
  computed: {
    displayedText() {
      return this.isCollapsed 
        ? this.text 
        : this.text.slice(0, this.maxLength) + '...';
    }
  }
};
</script>