当前位置：首页 > VUE

Vue查看全文实现

2026-03-07 21:53:32VUE

Vue 实现查看全文功能的方法

使用 `v-if` 和 `v-else` 控制显示

通过 Vue 的指令 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: '这里是完整的文本内容，可能很长很长...',
      truncatedText: '这里是截断的文本内容...',
      isExpanded: false
    };
  }
};
</script>

动态计算截断文本

如果文本内容是从后端动态获取的，可以通过计算属性动态截断文本。

<template>
  <div>
    <p>{{ displayText }}</p>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '查看全文' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '动态获取的完整文本内容...',
      isExpanded: false,
      maxLength: 50
    };
  },
  computed: {
    displayText() {
      return this.isExpanded
        ? this.fullText
        : this.fullText.slice(0, this.maxLength) + '...';
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</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: '使用 CSS 控制的文本内容...',
      isExpanded: false
    };
  }
};
</script>

<style>
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

结合第三方库实现高级功能

如果需要更复杂的功能（如动画效果、多行截断等），可以使用第三方库如 vue-truncate-collapsed 或 clamp-js。

安装 vue-truncate-collapsed：

npm install vue-truncate-collapsed

使用示例：

Vue查看全文实现

<template>
  <div>
    <truncate :length="100" :text="fullText" :less="'收起'" :more="'查看全文'" />
  </div>
</template>

<script>
import Truncate from 'vue-truncate-collapsed';
export default {
  components: { Truncate },
  data() {
    return {
      fullText: '使用第三方库实现的文本截断功能...'
    };
  }
};
</script>