# hs-menu
This Vue 2 component makes it simple to highlight a multi-level public menu item

 - Switch unlimited level menu
 - 无限层级菜单切换
 - Click or hover to change the unit style
 - 点击或者划过改变单元样式
 - Switch menu when locked
 - 锁定时才可切换菜单
 - Automatically shrinks to the left after unlocking
 - 解锁后菜单自动缩放到左侧栏
 - 修改source数据，动态加载菜单。优先使用source中selected激活menu，如果没有selected，
 使用上个source中activeMenu的。

## Installation

### npm install
Install via `npm` and use it as a vue plugin in your app.

```bash
package.json中配置
{
  "hs-menu": "1.2.1"
}
npm install
```
```js
import HsMenu from 'hs-menu';
Vue.use(HsMenu);
```

### npm update(reload)
```
 npm i -S hs-menu
```

### CDN install 
```
<script src = "//static2.servyou.com.cn/hs-menu.min.js"></script>
```
- 方式1：如果Vue和hs-menu都是使用script标签引入，直接使用。
- 方式2：如果Vue是使用import导入，则
```
Vue.use(window.HsMenu.default);
```


## Usage
You should wrap your menu in a `<hs-menu>` tag
 I show in the example below:

```html
 <hs-menu  ref = "hsMenu"
           :source="source"
           :active-menu="activeMenu"
           :before-select="beforeSelect"
           :isActiveParentMenu = "isActiveParentMenu"
           :select="select">
 </hs-menu>
```

### Options
``` javascript
/**
 * 数据源包含menuId,menuCode,parentId ...
 * @type {Array}
 */
 source: [{},{}],

/**
 * activeMenu 当前激活的菜单，可以通过修改当前值进行菜单切换
 * @type {String or Object}
 */
activeMenu: 'home',
 or
activeMenu: {
  menuCode: 'home', // 当前待激活的菜单
  params: {}, // select时传入的参数
  triggerSelectEvent: true, // 是否触发选择事件（未设置时，也会触发select事件）
},
/**
* 设置父节点是否能激活
* @type {Boolean} 
* default false
*/
isActiveParentMenu: false  
/**
* data {
*   menu: menu,
*   params: params
* } 
*/
select(data) {
  console.log(val);
},
/**
* 激活之前的函数，必须是个promise
* @type {Function}
*/
beforeSelect(currentMenu) {
  return new Promise((resolve, reject) => {
     if (currentMenu && currentMenu.menuCode === '***') {
       setTimeout(reject, 2000);
     } else {
       resolve();
     }
  });
},
```

### Method
```
/**
* 隐藏菜单
*/
this.$refs.hsMenu.hideMenuByCode(['home', 'employee', 'salary']);
Or
this.$refs.hsMenu.hideMenuByCode('home');

/**
* 显示菜单
*/
this.$refs.hsMenu.showMenuByCode(['home', 'employee', 'salary']);
Or
this.$refs.hsMenu.showMenuByCode('home');

```


### tips
引导图片添加（应用中心配置）
menu字段里面添加
guideIcon 引导图片地址
guideControl 0点击后不显示，1过期后不显示
如果有引导图片，并且guideControl为0时，需要业务方发送请求告知图片已点击。
```
  Axios.post('/basic/app/save', qs.stringify({
    accountId: '', 
    menuId: '', // menu.menuId
  }));
```

### 推荐布局
```
 <template>
   <div class = "app-container">
      <hs-menu v-if = "menuSource.length > 0"
               :source = "menuSource"
               :active-menu = "activeMenu"
               :select = "select"
               :is-active-parent-menu = "isActiveParentMenu"
               :before-select = "beforeSelect"></hs-menu>
      <div class = "right-content">
        <input type = "text" v-model="activeMenu">
        <a href = "javascript:void(0)" @click = "setSource">刷新数据</a>
      </div>
    </div>
  </template> 
    
  <style>
    html,body {
       padding: 0;
       margin: 0;
       height: 100%
     }
     .app-container {
       display: flex;
       height: 100%;
     }
     .container > .right-content {
       flex-grow: 1;
       width: calc(100% - 180px);
     }
  </style>
```


### Output
- 点击节点返回包含节点信息的对象，包括menuId,menuCode,children,unfold...
  - Note: children default to [], if there are no children, the attributes of unfold of the node is undefined
  - 注：children默认为[],如果没有子节点，则该节点的unfold为undefined