hs-menu v1.5.10-1

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.

package.json中配置
{
  "hs-menu": "1.2.1"
}
npm install

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:

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

Options

/**
 * 数据源包含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