vue实现展开收拢

Vue 实现展开/收拢功能

在 Vue 中实现展开和收拢功能可以通过多种方式实现，以下是一些常见的方法：

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

通过绑定一个布尔值来控制元素的显示和隐藏：

<template>
  <div>
    <button @click="toggle">展开/收拢</button>
    <div v-show="isExpanded">
      这是要展开/收拢的内容
    </div>
  </div>
</template>

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

使用 CSS 过渡效果

结合 Vue 的过渡系统实现平滑的展开/收拢动画：

<template>
  <div>
    <button @click="toggle">展开/收拢</button>
    <transition name="slide">
      <div v-show="isExpanded" class="content">
        这是带有过渡效果的内容
      </div>
    </transition>
  </div>
</template>

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

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

使用第三方组件库

许多 Vue UI 组件库提供了现成的展开/收拢组件：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="可折叠内容" name="1">
      <div>这是折叠内容</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    }
  }
}
</script>

动态高度过渡

对于高度不确定的内容，可以使用动态计算高度的方式：

<template>
  <div>
    <button @click="toggle">展开/收拢</button>
    <div ref="content" class="content" :style="{ height: contentHeight }">
      <div ref="inner">这是动态高度的内容...</div>
    </div>
  </div>
</template>

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

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

多级展开/收拢

对于多级展开收拢的场景，可以使用递归组件：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <div @click="toggle(item)">
        {{ item.title }}
        <span>{{ item.expanded ? '-' : '+' }}</span>
      </div>
      <div v-show="item.expanded">
        {{ item.content }}
        <tree-item v-if="item.children" :items="item.children"></tree-item>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: ['items'],
  methods: {
    toggle(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，简单的显示/隐藏使用 v-show 或 v-if 即可，需要动画效果则使用过渡系统，复杂场景可以考虑使用组件库或自定义递归组件。