vue实现展开收缩

Vue实现展开收缩功能

使用Vue实现展开收缩功能可以通过v-show或v-if指令结合点击事件来控制元素的显示与隐藏。以下提供几种常见实现方式：

基础实现（v-show）

<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>

使用transition添加动画效果

<template>
  <div>
    <button @click="toggle">展开/收缩</button>
    <transition name="fade">
      <div v-show="isExpanded">
        带有过渡动画的内容区域
      </div>
    </transition>
  </div>
</template>

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

动态高度过渡

对于需要平滑展开收缩的内容区域，可以使用动态计算高度的方法：

<template>
  <div>
    <button @click="toggle">展开/收缩</button>
    <div class="content" :style="{ height: isExpanded ? contentHeight + 'px' : '0' }">
      <div ref="content">
        动态高度的内容区域
      </div>
    </div>
  </div>
</template>

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

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

组件化实现

对于需要复用的展开收缩功能，可以封装成组件：

<!-- Expandable.vue -->
<template>
  <div class="expandable">
    <div class="header" @click="toggle">
      <slot name="header">{{ title }}</slot>
      <span class="icon">{{ isExpanded ? '-' : '+' }}</span>
    </div>
    <transition name="expand">
      <div class="content" v-show="isExpanded">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    expanded: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isExpanded: this.expanded
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style>
.expand-enter-active, .expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}
.expand-enter, .expand-leave-to {
  height: 0;
  opacity: 0;
}
</style>

使用组件：

<expandable title="更多选项">
  <p>这里是展开后的内容</p>
</expandable>

性能优化

对于大型内容区域，建议使用v-if替代v-show，因为v-if会真正销毁和重建元素，而v-show只是切换display属性：

<button @click="toggle">切换</button>
<transition name="fade">
  <div v-if="isExpanded">
    大量内容区域
  </div>
</transition>

以上方法可以根据具体需求选择使用，基础场景使用v-show最简单，需要动画效果则添加transition，需要精确控制高度则使用动态高度计算，组件化方式适合多处复用的情况。