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补充说明。 - 动态内容（如路由菜单）需确保折叠状态下布局仍保持合理。
