当前位置：首页 > VUE

vue 实现文字折叠

2026-01-19 06:25:32VUE

Vue 实现文字折叠的方法

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

通过绑定一个布尔值变量，利用 v-show 或 v-if 动态控制文字的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会直接销毁或重建 DOM 节点，适合条件变化较少的场景。

<template>
  <div>
    <button @click="toggleFold">{{ isFolded ? '展开' : '折叠' }}</button>
    <div v-show="!isFolded">这里是需要折叠的文字内容。</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFolded: false
    };
  },
  methods: {
    toggleFold() {
      this.isFolded = !this.isFolded;
    }
  }
};
</script>

结合 CSS 过渡效果

通过 Vue 的 <transition> 组件实现折叠/展开的动画效果，提升用户体验。可以自定义过渡的 CSS 类名（如 slide-fade）。

vue 实现文字折叠

<template>
  <div>
    <button @click="toggleFold">{{ isFolded ? '展开' : '折叠' }}</button>
    <transition name="slide-fade">
      <div v-show="!isFolded" class="content">这里是带动画的文字内容。</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFolded: false
    };
  },
  methods: {
    toggleFold() {
      this.isFolded = !this.isFolded;
    }
  }
};
</script>

<style>
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
.content {
  padding: 10px;
  background: #f5f5f5;
}
</style>

动态控制文本高度

通过绑定行内样式或类名，动态修改 max-height 或 height 实现折叠效果。适用于需要部分展示内容的场景（如“显示更多”）。

<template>
  <div>
    <button @click="toggleFold">{{ isFolded ? '显示更多' : '收起' }}</button>
    <div :style="{ maxHeight: isFolded ? '60px' : 'none', overflow: 'hidden' }">
      这里是长文本内容，超过指定高度时会隐藏。这里是长文本内容，超过指定高度时会隐藏。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFolded: true
    };
  },
  methods: {
    toggleFold() {
      this.isFolded = !this.isFolded;
    }
  }
};
</script>

使用第三方库（如 vue-show-more）

vue 实现文字折叠

对于复杂需求（如多行文本截断、自定义折叠按钮），可以使用现成的 Vue 插件。例如 vue-show-more 提供开箱即用的文本折叠功能。

安装：

npm install vue-show-more

使用示例：

<template>
  <vue-show-more :text="longText" :max-height="'100px'" />
</template>

<script>
import VueShowMore from 'vue-show-more';
export default {
  components: { VueShowMore },
  data() {
    return {
      longText: '这里是需要折叠的长文本内容...'
    };
  }
};
</script>