vue实现菜单缩放

实现思路

通过 Vue 的响应式数据和 CSS 过渡效果，结合动态绑定 class 或 style 来实现菜单的缩放功能。核心是利用 v-bind:class 或 v-bind:style 控制菜单宽度，并通过过渡动画平滑切换。

基础实现代码

<template>
  <div class="menu-container">
    <button @click="toggleMenu">切换菜单</button>
    <div class="menu" :class="{ 'collapsed': isCollapsed }">
      <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
      </ul>
    </div>
  </div>
</template>

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

<style>
.menu {
  width: 200px;
  transition: width 0.3s ease;
  background: #f0f0f0;
  overflow: hidden;
}

.menu.collapsed {
  width: 50px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  padding: 10px;
  white-space: nowrap;
}
</style>

进阶优化

添加图标和文字隐藏效果，提升用户体验。使用 v-show 或 v-if 控制文字显示，并配合图标切换。

<template>
  <div class="menu-container">
    <button @click="toggleMenu">
      {{ isCollapsed ? '展开' : '收起' }}
    </button>
    <div class="menu" :class="{ 'collapsed': isCollapsed }">
      <ul>
        <li>
          <span class="icon">📊</span>
          <span class="text" v-show="!isCollapsed">数据分析</span>
        </li>
        <li>
          <span class="icon">⚙️</span>
          <span class="text" v-show="!isCollapsed">设置</span>
        </li>
      </ul>
    </div>
  </div>
</template>

使用 CSS 变量动态控制

通过 CSS 变量实现更灵活的样式控制，便于主题切换或响应式调整。

.menu {
  --menu-width: 200px;
  width: var(--menu-width);
  transition: width 0.3s ease;
}

.menu.collapsed {
  --menu-width: 50px;
}

响应式设计

结合媒体查询，在小屏幕设备上默认折叠菜单。

@media (max-width: 768px) {
  .menu {
    width: 50px;
  }
  .menu:not(.collapsed) {
    width: 200px;
  }
}

注意事项

• 过渡动画需设置 overflow: hidden 避免内容溢出。
• 折叠时隐藏文字需考虑可访问性，可通过 aria-label 补充说明。
• 动态内容（如路由菜单）需确保折叠状态下布局仍保持合理。