vue展开全文实现
Vue 实现展开全文功能
在Vue中实现展开全文功能可以通过多种方式完成，以下是几种常见的方法：
使用v-show或v-if控制显示
通过一个布尔值变量控制文本的展开与收起状态，结合计算属性动态截取文本内容。
<template>
<div>
<p>{{ showFullText ? fullText : truncatedText }}</p>
<button @click="showFullText = !showFullText">
{{ showFullText ? '收起' : '展开全文' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
fullText: '这里是很长的文本内容...',
showFullText: false,
maxLength: 100
}
},
computed: {
truncatedText() {
return this.fullText.length > this.maxLength
? this.fullText.substring(0, this.maxLength) + '...'
: this.fullText
}
}
}
</script>使用CSS控制文本溢出
通过CSS的text-overflow和line-clamp属性实现文本截断，Vue只负责切换类名。
<template>
<div>
<p :class="{ 'truncate-text': !isExpanded }">{{ text }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开全文' }}
</button>
</div>
</template>
<style>
.truncate-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>使用第三方组件
可以使用现成的Vue组件如vue-truncate-collapsed来快速实现功能。
npm install vue-truncate-collapsed<template>
<div>
<truncate :length="100" :text="longText" />
</div>
</template>
<script>
import Truncate from 'vue-truncate-collapsed'
export default {
components: { Truncate },
data() {
return {
longText: '很长的文本内容...'
}
}
}
</script>动态计算文本高度
对于需要更精确控制的情况，可以通过ref获取DOM元素的实际高度，动态决定是否需要显示展开按钮。
<template>
<div>
<div ref="textContainer" :class="{ 'max-h-20': !expanded }" class="overflow-hidden">
{{ longText }}
</div>
<button
v-if="showToggle"
@click="expanded = !expanded"
>
{{ expanded ? '收起' : '展开全文' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
expanded: false,
showToggle: false,
longText: '...'
}
},
mounted() {
this.checkTextOverflow()
},
methods: {
checkTextOverflow() {
const el = this.$refs.textContainer
this.showToggle = el.scrollHeight > el.clientHeight
}
}
}
</script>注意事项
- 对于动态加载的内容，需要在内容更新后重新计算是否需要显示展开按钮
- 移动端需要考虑触摸事件和动画效果
- 长文本性能优化，避免频繁的DOM操作
- 无障碍访问，确保按钮有适当的ARIA属性
以上方法可以根据具体需求选择或组合使用，CSS方案性能较好但灵活性稍差，JavaScript方案控制更精确但实现稍复杂。
