vue实现文本折叠
实现文本折叠的基本思路
在Vue中实现文本折叠功能，通常需要控制文本的显示高度，通过"展开/收起"按钮切换状态。核心是结合CSS的max-height和overflow属性，配合Vue的数据绑定。
基础实现方法
模板部分
<template>
<div>
<div
class="text-content"
:class="{ 'collapsed': isCollapsed }"
ref="content"
>
{{ longText }}
</div>
<button @click="toggleCollapse">
{{ isCollapsed ? '展开' : '收起' }}
</button>
</div>
</template>样式部分
.text-content {
overflow: hidden;
transition: max-height 0.3s ease;
}
.collapsed {
max-height: 60px; /* 折叠后的高度 */
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示行数 */
-webkit-box-orient: vertical;
}脚本部分
export default {
data() {
return {
isCollapsed: true,
longText: '这里是很长的文本内容...'
}
},
methods: {
toggleCollapse() {
this.isCollapsed = !this.isCollapsed
}
}
}动态计算折叠高度
对于动态内容，可以使用clientHeight获取实际高度：
export default {
mounted() {
this.contentHeight = this.$refs.content.clientHeight
},
data() {
return {
contentHeight: 0,
isCollapsed: true
}
}
}更新CSS部分：
.collapsed {
max-height: 60px;
}使用第三方库
对于更复杂的需求，可以考虑使用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 }
}
</script>多行文本省略方案
纯CSS实现多行省略（兼容性较好方案）：
.text-content {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}动画效果增强
添加平滑的展开/收起动画：
.text-content {
transition: max-height 0.5s ease-in-out;
}通过调整max-height的值实现动画效果，注意设置足够大的最终高度值。
