当前位置：首页 > VUE

vue展开全文实现

2026-02-19 12:15:11VUE

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元素的实际高度，动态决定是否需要显示展开按钮。

vue展开全文实现

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