vue实现文本折叠
实现文本折叠的基本思路
在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>样式部分
<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>
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
}
}注意事项
- 确保折叠后的文本高度计算准确，避免出现内容截断不完整的情况
- 移动端设备需要考虑触摸事件的处理
- 对于动态加载的内容，需要在数据更新后重新计算折叠状态
- 多语言支持时需要调整省略号位置和按钮文本
