Vue查看全文实现

Vue 实现查看全文功能

在 Vue 中实现查看全文功能，可以通过控制文本的显示长度和切换状态来实现。以下是几种常见的实现方式：

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

通过一个布尔值变量控制文本的显示状态，点击按钮切换状态。

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

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的文本内容，可能非常长...',
      showFullText: false
    };
  },
  computed: {
    truncatedText() {
      return this.fullText.substring(0, 50) + '...';
    }
  }
};
</script>

使用 CSS 控制文本溢出

通过 CSS 的 text-overflow 和 white-space 属性控制文本显示，结合 Vue 动态切换类名。

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

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

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

使用第三方库

如果需要更复杂的功能（如多行文本截断），可以使用第三方库如 vue-clamp。

安装：

npm install vue-clamp

使用：

<template>
  <div>
    <v-clamp autoresize :ellipsis="'...'" :max-lines="maxLines">
      {{ fullText }}
    </v-clamp>
    <button @click="toggleLines">
      {{ maxLines === 1 ? '展开全文' : '收起' }}
    </button>
  </div>
</template>

<script>
import VClamp from 'vue-clamp';

export default {
  components: { VClamp },
  data() {
    return {
      fullText: '这里是完整的文本内容，可能非常长...',
      maxLines: 1
    };
  },
  methods: {
    toggleLines() {
      this.maxLines = this.maxLines === 1 ? Infinity : 1;
    }
  }
};
</script>

动态计算文本高度

通过动态计算文本高度，实现更灵活的展开/收起功能。

<template>
  <div>
    <p ref="text" :style="{ height: textHeight }">{{ fullText }}</p>
    <button @click="toggleText">
      {{ isExpanded ? '收起' : '展开全文' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的文本内容，可能非常长...',
      isExpanded: false,
      textHeight: '60px'
    };
  },
  methods: {
    toggleText() {
      this.isExpanded = !this.isExpanded;
      this.textHeight = this.isExpanded ? 'auto' : '60px';
    }
  }
};
</script>

<style>
p {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

以上方法可以根据具体需求选择，简单的文本截断可以使用前两种方法，复杂的多行截断可以使用第三方库或动态计算高度。