menu
// 假设 MenuItem 是一个已定义的 Vue 组件// import MenuItem from ‘./MenuItem.vue’; export default { name: ‘SideMenu’, components: { // MenuItem }, data() { return { smallMenu: false, // 初始状态：菜单展开 menuTree: [ { label: ‘仪表盘’, children: [] }, { label: ‘用户管理’, children: [] }, { label: ‘设置’, children: [] } ] }; }, methods: { toggleMenu() { this.smallMenu = !this.smallMenu; console.log(‘smallMenu 状态:’, this.smallMenu); // 调试输出 } }};.menu { background: #333; /* 调整为更专业的深色 */ color: #fff; position: fixed; height: 100vh; width: 240px; left: 0; /* 修正为 0 或具体像素值 */ top: 0; border-right: 1px solid #444; transition: all 0.3s ease; overflow-y: auto; /* 仅在 Y 轴上滚动 */ padding-top: 50px; i { position: fixed; left: 250px; /* 默认位置 */ font-size: 24px; /* 调整图标大小 */ top: 15px; user-select: none; cursor: pointer; transition: all 0.3s ease; z-index: 100; /* 确保图标在最上层 */ } &.small-menu { overflow-x: hidden; /* 隐藏横向溢出 */ width: 60px; padding-top: 50px; i { left: 20px; /* 收起时图标位置 */ } /* 当菜单收起时，隐藏 MenuItem 内部的文本内容 */ /* 假设 MenuItem 内部的文本有一个 .item-label 类 */ ::v-deep .menu-item .item-label { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } }}// 示例 MenuItem 样式 (如果 MenuItem 是一个简单的 div)// 如果 MenuItem 是一个独立的组件，这些样式应在其内部定义.menu-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; white-space: nowrap; /* 防止文本换行 */ i { margin-right: 10px; font-size: 20px; } .item-label { transition: opacity 0.3s ease; } &:hover { background: #555; }}
注意事项与最佳实践
响应式设计：考虑在不同屏幕尺寸下菜单的表现。例如，在小屏幕上可能默认收起菜单，或者提供一个完全不同的移动导航方案。可访问性 (Accessibility)：为汉堡图标添加 aria-label 属性，例如 aria-label=”Toggle navigation”，并使用 aria-expanded 属性指示菜单的当前状态，以帮助屏幕阅读器用户理解其功能。CSS 组织：对于大型应用，考虑使用 CSS Modules、BEM 命名规范或更高级的 CSS-in-JS 方案来管理样式，避免冲突和提高可维护性。组件化：将菜单项 (MenuItem) 封装成独立的组件是一个很好的实践，可以提高代码复用性和可维护性。
总结
实现 Vue.js 动态侧边菜单的关键在于有效地结合 Vue 的响应式数据绑定和 CSS 的过渡效果。当遇到菜单无法正常隐藏的问题时，最有效的调试方法是：首先，验证 Vue 数据属性 (smallMenu) 是否按预期切换；其次，利用浏览器开发者工具检查元素的类名和计算样式，确认 CSS 规则是否正确应用。通过对代码的细致分析和必要的优化（如修正单位、改进内容隐藏策略），可以构建出功能完善且用户体验良好的侧边导航菜单。
微信扫一扫 
支付宝扫一扫 
