当前位置：首页 > VUE

vue实现盒子的伸缩

2026-02-23 07:20:12VUE

实现盒子伸缩的方法

在Vue中实现盒子的伸缩可以通过CSS的flex布局或transition动画结合动态样式绑定完成。以下是几种常见方法：

使用Flex布局控制伸缩

通过Vue动态绑定class或style，结合CSS的flex属性实现伸缩效果：

<template>
  <div class="container">
    <div 
      class="box" 
      :style="{ flex: isExpanded ? '1' : '0.5' }"
      @click="toggleExpand"
    >点击伸缩</div>
  </div>
</template>

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

<style>
.container {
  display: flex;
  height: 200px;
}
.box {
  background: #42b983;
  transition: flex 0.3s ease;
}
</style>

使用Width/Height动画

通过动态绑定width或height属性，配合CSS过渡效果：

vue实现盒子的伸缩

<template>
  <div 
    class="resizable-box" 
    :style="{ width: boxWidth + 'px' }"
    @mouseenter="expand"
    @mouseleave="shrink"
  >悬停伸缩</div>
</template>

<script>
export default {
  data() {
    return { boxWidth: 100 };
  },
  methods: {
    expand() { this.boxWidth = 200; },
    shrink() { this.boxWidth = 100; }
  }
};
</script>

<style>
.resizable-box {
  height: 100px;
  background: #35495e;
  transition: width 0.5s;
}
</style>

使用CSS Grid布局

通过Vue控制grid-template-columns或grid-template-rows实现复杂伸缩：

<template>
  <div class="grid-container" :style="gridStyle">
    <div v-for="n in 3" :key="n" class="grid-item"></div>
  </div>
</template>

<script>
export default {
  data() {
    return { expandedIndex: null };
  },
  computed: {
    gridStyle() {
      return {
        gridTemplateColumns: Array(3).fill()
          .map((_, i) => i === this.expandedIndex ? '2fr' : '1fr').join(' ')
      };
    }
  }
};
</script>

<style>
.grid-container {
  display: grid;
  gap: 10px;
  height: 150px;
}
.grid-item {
  background: #ff7e67;
  transition: all 0.3s;
}
</style>

结合第三方库

使用vue-resize等库监听容器尺寸变化：

vue实现盒子的伸缩

安装依赖：
```
npm install vue-resize
```

组件实现：


<template>
<resize-observer @notify="handleResize">
 <div class="dynamic-box" :style="{ transform: `scale(${scale})` }">
   动态缩放
 </div>
</resize-observer>
</template>

import { ResizeObserver } from 'vue-resize'; export default { components: { ResizeObserver }, data() { return { scale: 1 }; }, methods: { handleResize(entry) { this.scale = entry.rect.width > 300 ? 1.2 : 1; } } }; ```