# ivew-side-menu-search-chg

> readme

Latest version **1.0.5** (published 2019-01-23) · 0 weekly downloads

## Install

```sh
npm install ivew-side-menu-search-chg
pnpm add ivew-side-menu-search-chg
yarn add ivew-side-menu-search-chg
bun add ivew-side-menu-search-chg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-01-23 |
| First published | 2018-10-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chenhuogu |

## Links

- npm: https://www.npmjs.com/package/ivew-side-menu-search-chg
- npm.io page: https://npm.io/package/ivew-side-menu-search-chg

## Recent versions

- 1.0.5 (latest) — 2019-01-23
- 1.0.4 — 2018-12-22
- 1.0.3 — 2018-11-27
- 1.0.2 — 2018-11-12
- 1.0.1 — 2018-10-30
- 1.0.0 — 2018-10-30

## README

## 写在前面

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

## 相关文章
关于该组件的一些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的值一样，因为<menu-item name="url">，点击菜单项的时候：
router.push({name: url});
所以路由要设置url和name的值一样。

---
_Source: https://npm.io/package/ivew-side-menu-search-chg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._