vue实现摘要
Vue 实现摘要的方法
在Vue中实现摘要功能通常涉及文本截断、展开/折叠交互以及样式控制。以下是几种常见实现方式：
使用CSS控制文本截断
通过CSS的text-overflow和行数限制实现基础摘要效果：
<template>
<div class="summary-container">
<p :class="{ 'truncate': !isExpanded }">{{ longText }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<style>
.truncate {
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>使用计算属性动态截断文本
通过JavaScript计算截断位置，适合需要精确字符控制的场景：
computed: {
summaryText() {
return this.isExpanded
? this.longText
: this.longText.slice(0, 100) + '...';
}
}使用第三方库
安装专门处理文本截断的库如vue-text-truncate：
npm install vue-text-truncate使用示例：
<template>
<text-truncate
:text="longText"
:maxChars="150"
expandText="展开"
collapseText="收起"
/>
</template>响应式摘要
结合窗口大小变化动态调整摘要长度：
data() {
return {
truncateLength: window.innerWidth < 768 ? 50 : 100
}
},
mounted() {
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.truncateLength = window.innerWidth < 768 ? 50 : 100;
}
}带动画效果的摘要
使用Vue的过渡组件实现平滑展开/折叠：
<transition name="slide">
<p v-if="isExpanded" key="full">{{ longText }}</p>
<p v-else key="summary">{{ summaryText }}</p>
</transition>
<style>
.slide-enter-active, .slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
opacity: 0;
transform: translateY(-10px);
}
</style>选择合适的方法取决于具体需求，CSS方案性能最优，JavaScript方案最灵活，第三方库可快速实现复杂功能。
