iview 更新左侧菜单

### 如何自定义和美化 iView 菜单树样式 #### 使用 CSS 自定义菜单树外观 为了实现更美观的菜单树效果，可以通过覆盖默认样式来调整 `iView` 的菜单组件。这通常涉及到编写特定的选择器以修改颜色、字体大小和其他视觉属性。 ```css /* 修改菜单项背景色 */ .ivu-menu-item { background-color: #f8f8f9 !important; } /* 改变选中状态下的样式 */ .ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){ color: white; background-color: #00a1d6!important; /* 更改为你想要的颜色 */ } ``` 通过上述方式可以改变整个菜单条目的基础显示风格[^1]。 #### 利用 slot 插槽增强功能 除了简单的样式更改之外，还可以利用 `slot` 来增加额外的功能或装饰性的图标到每一个节点上： ```html <Menu> <MenuItem name="parent"> Parent Menu Item <!-- 添加图标 --> <Icon type="ios-folder-outline" slot="title"></Icon> <MenuGroup title="Child Group Title"> <MenuItem name="child1"> Child One <Icon type="md-document" slot="icon"></Icon> </MenuItem> <MenuItem name="child2"> Child Two <Icon type="md-create" slot="icon"></Icon> </MenuItem> </MenuGroup> </MenuItem> </Menu> ``` 这段代码展示了如何向每个子项添加不同的图标，并且给父级元素设置了文件夹样式的图标作为指示符。 #### 动态设置类名优化交互体验 对于更加复杂的场景，比如当鼠标悬停时高亮当前行或者展开/折叠某些部分，则可能需要动态绑定 class 属性来进行控制: ```javascript // 假设这是 Vue 组件中的方法之一 handleMouseEnter(item, index) { this.$set(this.menuItems[index], 'hovered', true); }, handleMouseLeave(item, index) { this.$set(this.menuItems[index], 'hovered', false); } ``` 配合相应的模板结构以及 CSS 类定义即可完成这些高级定制化需求: ```html <template v-for="(item,index) in menuItems"> <MenuItem :name="index" @mouseenter.native="handleMouseEnter(item, index)" @mouseleave.native="handleMouseLeave(item, index)"> {{ item.title }} <span v-if="item.hovered" style="color:red;">(Hovering)</span> </MenuItem> </template> <style scoped> /* 当前悬浮状态下文字变为红色 */ .MenuItem:hover span { display:inline-block; } </style> ``` 以上就是一些基本技巧用于提升 `iView` 中菜单树控件的表现力与用户体验。当然实际应用里还需要考虑更多细节因素，例如浏览器兼容性和性能影响等问题。