Vue查看全文实现
Vue 查看全文实现方法
使用 v-if 和 v-else 控制显示
通过 v-if 和 v-else 指令切换显示全文和部分内容。定义一个布尔值变量 isExpanded 控制显示状态。
<template>
<div>
<p v-if="isExpanded">{{ fullText }}</p>
<p v-else>{{ truncatedText }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
fullText: '这里是完整的文本内容，可能很长很长...',
isExpanded: false
};
},
computed: {
truncatedText() {
return this.fullText.slice(0, 50) + '...';
}
}
};
</script>使用 CSS 控制文本溢出
通过 CSS 的 text-overflow 和 white-space 属性实现文本截断，结合 Vue 动态切换类名。
<template>
<div>
<p :class="{ 'truncate': !isExpanded }">{{ fullText }}</p>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
fullText: '这里是完整的文本内容，可能很长很长...',
isExpanded: false
};
}
};
</script>
<style>
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>使用第三方库 vue-truncate-collapsed
对于更复杂的需求，可以使用第三方库如 vue-truncate-collapsed 实现更灵活的截断和展开功能。
安装库：
npm install vue-truncate-collapsed使用示例：
<template>
<div>
<truncate :length="50" :text="fullText" />
</div>
</template>
<script>
import Truncate from 'vue-truncate-collapsed';
export default {
components: { Truncate },
data() {
return {
fullText: '这里是完整的文本内容，可能很长很长...'
};
}
};
</script>动态计算截断位置
根据容器宽度动态计算截断位置，适用于响应式布局。
<template>
<div ref="container">
<p ref="text">{{ fullText }}</p>
<button v-if="needsTruncation" @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<script>
export default {
data() {
return {
fullText: '这里是完整的文本内容，可能很长很长...',
isExpanded: false,
needsTruncation: false
};
},
mounted() {
this.checkTruncation();
window.addEventListener('resize', this.checkTruncation);
},
beforeDestroy() {
window.removeEventListener('resize', this.checkTruncation);
},
methods: {
checkTruncation() {
const container = this.$refs.container;
const text = this.$refs.text;
this.needsTruncation = text.scrollWidth > container.offsetWidth;
}
}
};
</script>结合过渡动画
为展开和收起添加过渡效果，提升用户体验。
<template>
<div>
<transition name="fade">
<p v-if="isExpanded" key="full">{{ fullText }}</p>
<p v-else key="truncated">{{ truncatedText }}</p>
</transition>
<button @click="isExpanded = !isExpanded">
{{ isExpanded ? '收起' : '展开' }}
</button>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>以上方法可以根据具体需求选择或组合使用，实现灵活的查看全文功能。
