vue实现伸缩列表

实现伸缩列表的基本思路

在Vue中实现伸缩列表可以通过控制数据的展开与收起来完成。通常使用v-for指令渲染列表项，结合v-show或v-if控制子项的显示隐藏。

使用v-show控制显示

通过v-show可以简单地切换元素的显示状态，适合频繁切换的场景。定义一个布尔值来控制子项的展开与收起。

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div @click="toggleExpand(item.id)">
        {{ item.title }}
      </div>
      <div v-show="expandedItems.includes(item.id)">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: 'Item 1', content: 'Content 1' },
        { id: 2, title: 'Item 2', content: 'Content 2' }
      ],
      expandedItems: []
    }
  },
  methods: {
    toggleExpand(id) {
      if (this.expandedItems.includes(id)) {
        this.expandedItems = this.expandedItems.filter(item => item !== id);
      } else {
        this.expandedItems.push(id);
      }
    }
  }
}
</script>

使用v-if控制渲染

v-if会完全销毁或重建元素，适合不频繁切换的场景。性能开销比v-show大，但初始渲染更快。

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div @click="item.expanded = !item.expanded">
        {{ item.title }}
      </div>
      <div v-if="item.expanded">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: 'Item 1', content: 'Content 1', expanded: false },
        { id: 2, title: 'Item 2', content: 'Content 2', expanded: false }
      ]
    }
  }
}
</script>

使用动态组件

对于复杂的子项内容，可以使用动态组件来切换不同的子组件，提供更灵活的控制。

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div @click="toggleComponent(item.id)">
        {{ item.title }}
      </div>
      <component :is="currentComponent[item.id]" v-if="expandedItems.includes(item.id)" />
    </div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      list: [
        { id: 1, title: 'Item 1' },
        { id: 2, title: 'Item 2' }
      ],
      expandedItems: [],
      currentComponent: {
        1: 'ChildComponent',
        2: 'ChildComponent'
      }
    }
  },
  methods: {
    toggleComponent(id) {
      if (this.expandedItems.includes(id)) {
        this.expandedItems = this.expandedItems.filter(item => item !== id);
      } else {
        this.expandedItems.push(id);
      }
    }
  }
}
</script>

添加动画效果

通过Vue的transition组件可以为伸缩列表添加平滑的动画效果，提升用户体验。

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div @click="item.expanded = !item.expanded">
        {{ item.title }}
      </div>
      <transition name="fade">
        <div v-if="item.expanded">
          {{ item.content }}
        </div>
      </transition>
    </div>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用第三方库如vue-accordion或手动实现类似功能。

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

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

export default {
  components: {
    VueAccordion,
    VueAccordionItem
  },
  data() {
    return {
      list: [
        { id: 1, title: 'Item 1', content: 'Content 1' },
        { id: 2, title: 'Item 2', content: 'Content 2' }
      ]
    }
  }
}
</script>

通过以上方法，可以灵活地在Vue中实现伸缩列表功能，根据需求选择适合的方案。