Vue查看全文实现

Vue 查看全文实现方法

在Vue中实现查看全文功能通常涉及文本截断和展开/折叠操作，以下是几种常见实现方式：

使用CSS控制文本显示

通过CSS的text-overflow和line-clamp属性实现基础文本截断：

<template>
  <div>
    <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>

使用计算属性动态截断文本

对于更精确的字符控制，可以使用计算属性：

computed: {
  truncatedText() {
    return this.isExpanded 
      ? this.longText 
      : this.longText.slice(0, 100) + '...';
  }
}

第三方库实现

使用专门处理文本截断的库如vue-text-truncate：

import TextTruncate from 'vue-text-truncate'

export default {
  components: { TextTruncate },
  template: `
    <text-truncate 
      :text="longText" 
      :lines="3" 
      less="收起" 
      more="展开全文"
    />
  `
}

响应式高度检测

通过ref获取元素实际高度判断是否需要显示展开按钮：

methods: {
  checkOverflow() {
    const el = this.$refs.textElement
    this.showToggle = el.scrollHeight > el.clientHeight
  }
},
mounted() {
  this.checkOverflow()
  window.addEventListener('resize', this.checkOverflow)
}

动画过渡效果

为展开/收起添加平滑过渡：

.text-content {
  transition: max-height 0.3s ease;
  max-height: 60px;
  overflow: hidden;
}
.text-content.expanded {
  max-height: 1000px;
}

这些方法可根据具体需求组合使用，CSS方案性能最优但灵活性较低，计算属性方案适合精确控制字符数，第三方库方案实现最快捷但增加包体积。