当前位置：首页 > VUE

vue图片实现收缩展开

2026-01-21 22:45:06VUE

实现图片收缩展开功能

在Vue中实现图片的收缩展开功能，可以通过动态绑定样式或类名来控制图片的显示状态。以下是几种常见实现方式：

使用v-show控制显示

通过v-show指令可以简单实现图片的显示和隐藏：

vue图片实现收缩展开

<template>
  <div>
    <button @click="toggleImage">切换图片</button>
    <img v-show="isVisible" src="your-image-path.jpg" alt="示例图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  },
  methods: {
    toggleImage() {
      this.isVisible = !this.isVisible
    }
  }
}
</script>

使用CSS过渡动画

为收缩展开添加平滑的过渡效果：

vue图片实现收缩展开

<template>
  <div>
    <button @click="toggleImage">切换动画</button>
    <transition name="fade">
      <img v-if="showImage" src="your-image-path.jpg" class="image-style">
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImage: true
    }
  },
  methods: {
    toggleImage() {
      this.showImage = !this.showImage
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.image-style {
  max-width: 100%;
  height: auto;
}
</style>

动态改变图片尺寸

实现图片尺寸的平滑缩放：

<template>
  <div>
    <button @click="toggleSize">切换尺寸</button>
    <img 
      src="your-image-path.jpg" 
      :style="{ width: imgWidth + 'px', height: 'auto' }"
      @click="toggleSize"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgWidth: 300,
      isExpanded: true
    }
  },
  methods: {
    toggleSize() {
      this.imgWidth = this.isExpanded ? 100 : 300
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

使用第三方动画库

如需更复杂的动画效果，可以考虑使用第三方动画库如animate.css：

<template>
  <div>
    <button @click="toggleImage">动画切换</button>
    <transition
      enter-active-class="animate__animated animate__zoomIn"
      leave-active-class="animate__animated animate__zoomOut"
    >
      <img v-if="showImg" src="your-image-path.jpg">
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImg: true
    }
  },
  methods: {
    toggleImage() {
      this.showImg = !this.showImg
    }
  }
}
</script>

以上方法可根据实际需求选择使用，v-show适合简单显示隐藏，transition适合添加过渡效果，动态样式适合尺寸变化，第三方库则能提供更丰富的动画效果。