当前位置：首页 > VUE

vue实现文字扩展

2026-01-18 21:25:07VUE

Vue 实现文字扩展的方法

在 Vue 中实现文字扩展（如展开/收起功能）可以通过动态绑定样式或内容来实现。以下是几种常见的实现方式：

动态绑定 class 或 style

通过 v-bind:class 或 v-bind:style 控制文字的显示高度或行数，结合点击事件切换状态。

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

<script>
export default {
  data() {
    return {
      isExpanded: false,
      longText: '这是一段很长的文字...'
    };
  }
};
</script>

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

使用计算属性动态截取文字

通过计算属性动态返回截取后的文字或完整文字。

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

<script>
export default {
  data() {
    return {
      isExpanded: false,
      longText: '这是一段很长的文字...'
    };
  },
  computed: {
    displayedText() {
      return this.isExpanded 
        ? this.longText 
        : this.longText.slice(0, 20) + '...';
    }
  }
};
</script>

结合第三方库（如 `vue-truncate-collapsed`）

如果需要更复杂的功能（如动画效果），可以使用第三方库简化实现。

<template>
  <div>
    <truncate :length="100" :ellipsis="'...'" :toggle="true">
      {{ longText }}
    </truncate>
  </div>
</template>

<script>
import Truncate from 'vue-truncate-collapsed';
export default {
  components: { Truncate },
  data() {
    return {
      longText: '这是一段很长的文字...'
    };
  }
};
</script>