当前位置：首页 > VUE

vue实现伸缩列表

2026-01-17 19:34:27VUE

Vue 实现伸缩列表的方法

使用 Vue 实现伸缩列表可以通过动态绑定样式或类名，结合过渡效果实现平滑的展开和收起动画。以下是几种常见实现方式：

动态绑定高度

通过 v-if 或 v-show 控制列表显示，结合 CSS 过渡实现动画效果：

<template>
  <div>
    <button @click="toggleList">切换列表</button>
    <transition name="slide">
      <ul v-show="isExpanded">
        <li v-for="item in items" :key="item.id">{{ item.text }}</li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ]
    }
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
  overflow: hidden;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
}
.slide-enter-to, .slide-leave {
  max-height: 500px;
}
</style>

使用第三方组件

Vue 生态中有现成的可伸缩列表组件，如 vue-accordion：

npm install vue-accordion

<template>
  <vue-accordion>
    <vue-accordion-item v-for="item in items" :key="item.id">
      <template v-slot:title>{{ item.title }}</template>
      <template v-slot:content>{{ item.content }}</template>
    </vue-accordion-item>
  </vue-accordion>
</template>

<script>
import { VueAccordion, VueAccordionItem } from 'vue-accordion'

export default {
  components: {
    VueAccordion,
    VueAccordionItem
  },
  data() {
    return {
      items: [
        { id: 1, title: '标题1', content: '内容1' }
      ]
    }
  }
}
</script>

动态计算内容高度

对于需要精确控制高度的场景，可以通过 ref 获取元素实际高度：

<template>
  <div>
    <button @click="toggle">展开/收起</button>
    <div ref="content" :style="{ height: contentHeight }">
      <p>列表内容...</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      contentHeight: '0px'
    }
  },
  methods: {
    toggle() {
      if (this.isExpanded) {
        this.contentHeight = '0px'
      } else {
        this.contentHeight = `${this.$refs.content.scrollHeight}px`
      }
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

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

使用 CSS Grid 布局

CSS Grid 的 grid-template-rows 属性也可以实现平滑过渡：

vue实现伸缩列表

<template>
  <div class="expandable" :class="{ expanded: isExpanded }">
    <div class="content">
      <p>列表内容...</p>
    </div>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

<style>
.expandable {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.expandable.expanded {
  grid-template-rows: 1fr;
}
.content {
  overflow: hidden;
}
</style>

以上方法可以根据具体需求选择，动态高度方法适用于内容高度不固定的场景，CSS Grid 方法则更现代简洁。