当前位置：首页 > VUE

vue实现展开全部

2026-01-17 08:05:57VUE

Vue 实现展开全部功能

通过 v-show 或 v-if 控制元素的显示与隐藏，结合按钮切换状态实现展开/收起功能。

<template>
  <div>
    <p v-show="isExpanded || !isExpandable">完整内容</p>
    <p v-show="!isExpanded && isExpandable">部分内容...</p>
    <button @click="toggleExpand" v-if="isExpandable">
      {{ isExpanded ? '收起' : '展开全部' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      isExpandable: true
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

动态内容截断实现

对于动态内容，先计算内容高度决定是否需要显示展开按钮。

<template>
  <div>
    <div ref="content" :class="{ 'line-clamp': !isExpanded }">
      {{ longText }}
    </div>
    <button 
      v-if="showToggle"
      @click="isExpanded = !isExpanded"
    >
      {{ isExpanded ? '收起' : '展开全部' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      showToggle: false,
      longText: '...长文本内容...'
    }
  },
  mounted() {
    this.checkOverflow()
  },
  methods: {
    checkOverflow() {
      const element = this.$refs.content
      this.showToggle = element.scrollHeight > element.clientHeight
    }
  }
}
</script>

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

使用第三方组件

安装 vue-truncate-collapsed 等专门处理截断展开的组件。

npm install vue-truncate-collapsed

<template>
  <truncate :length="100" :ellipsis="'...'" :less="'收起'" :more="'展开全部'">
    {{ longText }}
  </truncate>
</template>

<script>
import Truncate from 'vue-truncate-collapsed'

export default {
  components: {
    Truncate
  },
  data() {
    return {
      longText: '...长文本内容...'
    }
  }
}
</script>

列表数据展开实现

对于列表数据，控制显示条目数量实现展开全部功能。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in visibleItems" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="toggleItems">
      {{ showAll ? '收起' : '展开全部' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3', '项目4', '项目5'],
      showAll: false,
      defaultCount: 3
    }
  },
  computed: {
    visibleItems() {
      return this.showAll 
        ? this.items 
        : this.items.slice(0, this.defaultCount)
    }
  },
  methods: {
    toggleItems() {
      this.showAll = !this.showAll
    }
  }
}
</script>

vue实现展开全部