vue实现菜单缩放

实现菜单缩放的基本思路

在Vue中实现菜单缩放功能，通常需要结合CSS过渡效果和Vue的数据绑定特性。核心是通过控制菜单容器的宽度或高度，配合过渡动画实现平滑缩放效果。

基础实现步骤

定义菜单状态 使用Vue的data或computed属性存储菜单的展开/折叠状态：

data() {
  return {
    isCollapsed: false
  }
}

绑定样式类 根据状态动态绑定CSS类控制宽度变化：

<div 
  class="menu-container" 
  :class="{ 'collapsed': isCollapsed }"
>
  <!-- 菜单内容 -->
</div>

添加过渡效果 使用CSS过渡或动画实现平滑缩放：

.menu-container {
  width: 200px;
  transition: width 0.3s ease;
}
.collapsed {
  width: 60px;
}

进阶实现方案

使用Vue过渡组件 通过<transition>组件实现更复杂的动画效果：

<transition name="slide">
  <div v-show="!isCollapsed" class="menu-content">
    <!-- 菜单内容 -->
  </div>
</transition>

添加缩放按钮 在模板中添加控制按钮触发状态变化：

<button @click="isCollapsed = !isCollapsed">
  {{ isCollapsed ? '展开' : '折叠' }}
</button>

响应式处理

监听窗口大小 结合window.addEventListener实现响应式折叠：

mounted() {
  window.addEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.isCollapsed = window.innerWidth < 768
  }
}

性能优化建议

使用CSS transform 对于复杂菜单，考虑使用transform代替宽度变化：

.menu-container {
  transform: scaleX(1);
  transform-origin: left;
}
.collapsed {
  transform: scaleX(0.3);
}

添加will-change属性 提前告知浏览器可能的变化：

.menu-container {
  will-change: transform;
}

完整示例代码

<template>
  <div class="menu-wrapper">
    <button @click="toggleMenu">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>

    <div 
      class="menu-container" 
      :class="{ 'collapsed': isCollapsed }"
    >
      <ul>
        <li v-for="item in menuItems" :key="item.id">
          {{ item.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      menuItems: [
        { id: 1, text: '首页' },
        { id: 2, text: '产品' },
        { id: 3, text: '关于我们' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.menu-container {
  width: 200px;
  transition: width 0.3s ease;
  background: #f5f5f5;
  overflow: hidden;
}
.collapsed {
  width: 60px;
}
</style>