iView 4.* 自定义侧边栏触发器（修正）

最新推荐文章于 2024-04-07 23:54:00 发布

原创

最新推荐文章于 2024-04-07 23:54:00 发布 · 896 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue和iView框架自定义侧边栏菜单，解决多级子菜单隐藏、样式调整及悬停显示标题问题。通过修改Scoped样式和使用Submenu组件，实现侧边栏的伸缩功能。

#1）问题：

去年刚接触vue，写过有关通过iView框架自定义侧边栏触发器的内容。当时对vue和它的生态一窍不通，也没什么基础，回头看之前的那篇文章，我觉得还有很多问题没有解决。另外还有两个小伙伴有问到上一篇中，菜单伸展隐藏的问题，借此机会重新把之前写的整理一下，同时解决一下之前没有解决的问题，希望能给一些小伙伴一些帮助。

#2）过程：

2.1 依赖包，"view-design": "^4.3.2"

2.2 vue-cli创建一个hello项目（过程略）

2.3 使用iView官网的布局模板

2.4 左侧侧边栏的菜单中，添加子菜单组件；右侧头部添加标题；

#3）问题：

（1）解决的主要问题是iview中多级子菜单没有隐藏的问题

主要思路是借鉴上文2.3中官网的布局模板。

给子菜单中的每一个MenuItem 添加Icon标签和span标签，设置不同的css样式，在侧边栏伸展的时候，赋予不同的css样式。

<template>
    <Submenu name="2">
        <template slot="title">
            <Icon type="ios-people" />
            <span> 子菜单标题</span>
        </template>
        <MenuIt