1.0.5 • Published 5 years ago

ivew-side-menu-search-chg v1.0.5

Weekly downloads
18
License
-
Repository
-
Last release
5 years ago

写在前面

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

相关文章

关于该组件的一些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菜单是否折叠Booleanfalse
theme主题String'light'
collapsed菜单是否折叠Booleanfalse
rootIconSize折叠之后的一级菜单按钮大小Number20
iconSize折叠之后二级等菜单按钮大小Number16
accordion是否开启手风琴模式Booleantrue

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的值一样。

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

6 years ago

1.0.0

6 years ago