当前位置：首页 > VUE

vue 实现更多展开

2026-01-19 01:56:16VUE

Vue 实现更多展开功能

在 Vue 中实现“更多展开”功能可以通过多种方式完成，以下是几种常见的实现方法：

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

通过 Vue 的指令 v-show 或 v-if 动态控制内容的显示与隐藏。

<template>
  <div>
    <p>{{ truncatedText }}</p>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开更多' }}
    </button>
    <p v-show="isExpanded">{{ fullText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的长文本内容...',
      isExpanded: false,
    };
  },
  computed: {
    truncatedText() {
      return this.fullText.slice(0, 50) + '...';
    },
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

使用 CSS 控制文本溢出

通过 CSS 的 text-overflow 和 max-height 属性实现展开与收起的效果。

<template>
  <div>
    <p :class="{ 'expanded': isExpanded }">{{ fullText }}</p>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开更多' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是完整的长文本内容...',
      isExpanded: false,
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style>
p {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.3s ease;
}

p.expanded {
  max-height: 1000px;
}
</style>

使用第三方库

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

<template>
  <div>
    <vue-show-more :text="fullText" :lines="2" />
  </div>
</template>

<script>
import VueShowMore from 'vue-show-more';

export default {
  components: {
    VueShowMore,
  },
  data() {
    return {
      fullText: '这里是完整的长文本内容...',
    };
  },
};
</script>

动态计算文本高度

通过动态计算文本高度实现展开与收起的效果。

<template>
  <div>
    <p ref="content" :style="{ height: contentHeight }">{{ fullText }}</p>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开更多' }}
    </button>
  </div>
</template>

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

以上方法可以根据具体需求选择使用，灵活调整实现方式。

vue 实现更多展开