写在前面

最近在做的某系统，菜单非常多，系统本身业务比较多，再加上十好几张报表，导致整个菜单列表非常长， 用户在找的时候非常的不方便，于是便想着给菜单列表加上搜索功能，尽可能的将属性封装到组件了。

相关文章

关于该组件的一些Demo图片和实现思路和细节在我的博客上记载了，欢迎围观~

https://blog.csdn.net/lvdou1120101985/article/details/83447505

来自一枚大龄程序媛~

安装和使用

1. 安装

install ivew-side-menu-search-chg --save

2. 使用

最大的前提是项目本身使用的就是vue + iView

局部引入，父组件添加：

import SideMenu from 'ivew-side-menu-search-chg';

全局引入，在vue项目的入口js文件（一般是main.js）中添加：

import SideMenu from 'ivew-side-menu-search-chg';
Vue.use(SideMenu);

属性

| 属性 | 说明 | 类型 | 参数 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | menuList | 菜单列表数据 | Array | | 空 | | collapsed | 菜单是否折叠 | Boolean| | false | | theme | 主题 | String| | 'light' | | collapsed | 菜单是否折叠 | Boolean| | false | | rootIconSize | 折叠之后的一级菜单按钮大小 | Number| | 20 | | iconSize | 折叠之后二级等菜单按钮大小 | Number| | 16 | | accordion | 是否开启手风琴模式 | Boolean| | true |

menuList示例，必须具有以下格式，参数必须包含以下所示：

 [
    {
      name: '采购审核',
      menuIcon: ' iconfont icon-fenlei',
      url: '/check',
      children: [
        {
          name: '采购订单',
          menuIcon: ' iconfont icon-fenlei',
          url: '/check/po-list', // 二级菜单的url要在一级菜单上添加
        }
      ]
    },
    {

    }
  ]

为了点击菜单项可以跳转路由，路由需要一下格式：

{
    path: '/set/role',
    name: '/set/role'
}

即path和name的值一样，因为，点击菜单项的时候： router.push({name: url}); 所以路由要设置url和name的值一样。