vue实现摘要
Vue 实现摘要的方法
在 Vue 中实现文本摘要功能通常涉及截取文本的前部分内容并添加省略号。可以通过计算属性、过滤器或自定义指令来实现。
计算属性实现 在 Vue 组件中定义一个计算属性，用于截取文本的前 N 个字符并添加省略号。
computed: {
summary() {
const maxLength = 100;
return this.fullText.length > maxLength
? this.fullText.substring(0, maxLength) + '...'
: this.fullText;
}
}过滤器实现 创建一个全局或局部过滤器，可以在模板中直接使用。
Vue.filter('summary', function(value, maxLength) {
if (!value) return '';
return value.length > maxLength
? value.substring(0, maxLength) + '...'
: value;
});模板中使用：
<p>{{ fullText | summary(100) }}</p>自定义指令实现 通过自定义指令动态截取文本内容。
Vue.directive('summary', {
bind(el, binding) {
const maxLength = binding.value || 100;
const text = el.textContent;
if (text.length > maxLength) {
el.textContent = text.substring(0, maxLength) + '...';
}
}
});模板中使用：
<p v-summary="50">{{ fullText }}</p>动态摘要实现
如果需要根据屏幕宽度动态调整摘要长度，可以结合 CSS 和 JavaScript 实现响应式摘要。
methods: {
updateSummary() {
const width = window.innerWidth;
this.summaryLength = width < 768 ? 50 : 100;
}
},
mounted() {
window.addEventListener('resize', this.updateSummary);
this.updateSummary();
},
beforeDestroy() {
window.removeEventListener('resize', this.updateSummary);
}多行文本省略
对于多行文本的省略，可以使用 CSS 的 -webkit-line-clamp 属性。
.summary {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}模板中使用：
<p class="summary">{{ fullText }}</p>第三方库
如果需要更复杂的摘要功能，可以使用第三方库如 vue-truncate-collapsed。
安装：
npm install vue-truncate-collapsed使用：
import VueTruncate from 'vue-truncate-collapsed';
Vue.use(VueTruncate);模板中使用：
<vue-truncate :length="100" :text="fullText" />以上方法可以根据具体需求选择适合的方式实现 Vue 中的摘要功能。
