当前位置：首页 > VUE

Vue查看全文实现

2026-01-08 06:48:07VUE

Vue 查看全文实现方法

使用 `v-show` 或 `v-if` 控制显示

通过 v-show 或 v-if 指令控制文本的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会销毁和重建 DOM，适合不频繁切换的场景。

<template>
  <div>
    <p>{{ isExpanded ? fullText : truncatedText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全文' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的文本内容，可能很长很长...',
      truncatedText: '这里是截断的文本内容...',
      isExpanded: false
    }
  }
}
</script>

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

通过计算属性动态生成截断后的文本，避免硬编码截断内容。

<template>
  <div>
    <p>{{ displayText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全文' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的文本内容，可能很长很长...',
      maxLength: 20,
      isExpanded: false
    }
  },
  computed: {
    displayText() {
      return this.isExpanded 
        ? this.fullText 
        : this.fullText.slice(0, this.maxLength) + '...'
    }
  }
}
</script>

使用 CSS 控制文本行数

通过 CSS 的 -webkit-line-clamp 属性限制文本显示的行数，点击按钮后取消限制。

<template>
  <div>
    <p :class="{ 'truncate-text': !isExpanded }">{{ fullText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全文' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的文本内容，可能很长很长...',
      isExpanded: false
    }
  }
}
</script>

<style>
.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

使用第三方库（如 `vue-text-clamp`）

对于更复杂的需求，可以使用第三方库如 vue-text-clamp，它提供了更灵活的文本截断和展开功能。

安装库：

npm install vue-text-clamp

使用示例：

<template>
  <div>
    <text-clamp 
      :text="fullText" 
      :max-lines="2" 
      :expanded="isExpanded"
      @clamp-change="handleClampChange"
    >
      <template #after="{ expand, collapse }">
        <button v-if="showMore" @click="expand">展开全文</button>
        <button v-else @click="collapse">收起</button>
      </template>
    </text-clamp>
  </div>
</template>

<script>
import TextClamp from 'vue-text-clamp'

export default {
  components: { TextClamp },
  data() {
    return {
      fullText: '这里是完整的文本内容，可能很长很长...',
      isExpanded: false,
      showMore: false
    }
  },
  methods: {
    handleClampChange({ clamped }) {
      this.showMore = clamped
    }
  }
}
</script>

结合动画效果

为文本展开和收起添加动画效果，提升用户体验。

<template>
  <div>
    <transition name="slide-fade">
      <p :key="isExpanded">{{ displayText }}</p>
    </transition>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全文' }}
    </button>
  </div>
</template>

<style>
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

Vue查看全文实现