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中配置npm install
;Vue;
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:
Options
/*** 数据源包含menuId,menuCode,parentId ...* @type*/source: {}{}/*** activeMenu 当前激活的菜单,可以通过修改当前值进行菜单切换* @type {String or Object}*/activeMenu: 'home'oractiveMenu:menuCode: 'home' // 当前待激活的菜单params: {} // select时传入的参数triggerSelectEvent: true // 是否触发选择事件(未设置时,也会触发select事件)/*** 设置父节点是否能激活* @type* default false*/isActiveParentMenu: false/*** data {* menu: menu,* params: params* }*/{console;}/*** 激活之前的函数,必须是个promise* @type*/{return {if currentMenu && currentMenumenuCode === '***';else;};}
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