当前位置：首页 > VUE

vue实现伸缩

2026-01-08 01:53:54VUE

Vue实现伸缩功能的方法

使用CSS过渡和Vue的v-if或v-show

通过CSS的transition属性结合Vue的条件渲染指令（v-if或v-show）可以实现元素的伸缩效果。定义一个CSS类，设置过渡效果，并在Vue中通过数据绑定控制元素的显示或隐藏。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div class="expandable" v-show="isExpanded">
      Content to expand or collapse.
    </div>
  </div>
</template>

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

<style>
.expandable {
  transition: all 0.3s ease;
  overflow: hidden;
}
</style>

使用动态绑定样式

通过动态绑定style或class，控制元素的高度或宽度变化，实现伸缩效果。可以结合max-height或height属性实现平滑过渡。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div 
      class="expandable" 
      :style="{ maxHeight: isExpanded ? '500px' : '0px' }"
    >
      Content to expand or collapse.
    </div>
  </div>
</template>

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

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

使用第三方库（如Vue-Collapse）

如果需要更复杂的功能，可以使用第三方库如vue-collapse。安装后，直接使用其提供的组件即可实现伸缩效果。

npm install vue-collapse --save

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <vue-collapse :show="isExpanded">
      Content to expand or collapse.
    </vue-collapse>
  </div>
</template>

<script>
import { VueCollapse } from 'vue-collapse';

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

结合动画库（如Animate.css）

通过引入动画库（如Animate.css），结合Vue的过渡组件，可以实现更丰富的伸缩动画效果。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div v-if="isExpanded" class="expandable">
        Content to expand or collapse.
      </div>
    </transition>
  </div>
</template>

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

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
.expandable {
  overflow: hidden;
}
</style>