vue实现文字折叠
Vue 实现文字折叠功能
文字折叠功能通常用于长文本的展示与隐藏，以下提供几种实现方式：
使用 v-show 或 v-if 控制显示
通过按钮切换布尔值来控制文本的显示与隐藏：
<template>
<div>
<p v-show="isExpanded">{{ longText }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
isExpanded: false,
longText: '这里是需要折叠的长文本内容...'
}
}
}
</script>结合 CSS 过渡效果
添加过渡效果使折叠/展开更平滑：
<template>
<div>
<div class="text-container" :class="{ 'collapsed': !isExpanded }">
<p>{{ longText }}</p>
</div>
<button @click="toggleExpand">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<style>
.text-container {
max-height: 500px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.text-container.collapsed {
max-height: 60px;
}
</style>使用第三方组件
安装 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 },
data() {
return {
longText: '...'
}
}
}
</script>动态计算文本高度
对于需要精确控制显示行数的情况：
<template>
<div>
<p ref="text" :class="{ 'line-clamp': !isExpanded }">{{ longText }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<style>
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>以上方法可根据具体需求选择使用，纯 CSS 方案性能更好，而 JavaScript 方案提供更精确的控制能力。
