当前位置：首页 > VUE

vue实现文本折叠

2026-03-09 05:07:34VUE

实现文本折叠的基本思路

在Vue中实现文本折叠功能通常需要结合CSS和JavaScript来控制文本的显示与隐藏。核心逻辑是通过数据绑定控制CSS类或内联样式，动态切换文本的展开与折叠状态。

基础实现方法

模板部分

<template>
  <div class="text-container">
    <p :class="{ 'collapsed': isCollapsed }">{{ longText }}</p>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
  </div>
</template>

脚本部分

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

样式部分

vue实现文本折叠

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

进阶实现方案

带动画效果的折叠

<template>
  <div>
    <div class="text-wrapper" :style="{ height: isCollapsed ? '60px' : 'auto' }">
      {{ content }}
    </div>
    <button @click="toggleCollapse">
      {{ isCollapsed ? '显示更多' : '收起' }}
    </button>
  </div>
</template>

.text-wrapper {
  transition: height 0.3s ease;
  overflow: hidden;
}

使用第三方库

对于更复杂的需求，可以考虑使用专门处理文本截断的Vue组件：

安装vue-clamp
```
npm install vue-clamp
```

使用示例


<template>
<v-clamp autoresize :ellipsis="'...'" :location="'end'">
 这里是需要折叠的长文本内容...
</v-clamp>
</template>

import VClamp from 'vue-clamp'

export default { components: { VClamp } }

```

响应式折叠实现

根据屏幕宽度自动调整折叠行数：

data() {
  return {
    collapseLines: window.innerWidth < 768 ? 2 : 3
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.collapseLines = window.innerWidth < 768 ? 2 : 3
  }
}