ivew-side-menu-search-chg

写在前面

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

相关文章

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

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

来自一枚大龄程序媛~

安装和使用

1. 安装

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

1. 使用

最大的前提是项目本身使用的就是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的值一样。