vue-luban-menu

一个简单的鲁班导航菜单组件，基于Vue.js

安装

npm install vue-luban-menu --save

引入

import Vue from 'vue'
import LubanMenu from 'vue-luban-menu'

Vue.use(LubanMenu)
// or
import LubanMenu from 'vue-luban-menu'
Vue.component(LubanMenu.name, LubanMenu)

使用

<vue-luban-menu 
	:z-index="100" 
	:offset-top="54"
	:apps="apps" 
	:favorites="favorites" 
	@favorite-remove="removeFavorite" 
	@favorite-add="addFavorite"
>
      <div>click me</div>
</vue-luban-menu>

Props

| 名称 | 介绍 | 类型 | 备注 | |-----------|-----------|-----------|-------------| | apps | 应用数据列表，树形结构，直接使用原始接口数据 | Array | 必填 | | favorites | 收藏列表，默认为空数组 | Array | 可选 | | z-index | 菜单的z-index，默认2000 | Number | 可选 | | offset-top | 菜单顶部位置，默认54 | Number | 可选 | | use-default-action | 是否允许收藏添加或移除的默认行为 | Boolean | 可选 |

Events

| 名称 | 介绍 | 回调参数 | |-----------|-----------|-----------| | favorite-remove | 删除收藏时触发的hook，可以在外部维护favorites | 应用项item | | favorite-add | 添加收藏时触发的hook，可以在外部维护favorites | 应用项item | | menu-click | 点击菜单项hook | 应用项item |

apps 应用数据列表demo

[
	{
		id: 1,
		title: '应用开发',
		appInstances: [
			{ id:11, title: '数据质量开发' },
			{ id:12, title: '数据服务开发' },
			{ id:13, title: 'steamSQL' },
			{ id:14, title: '工作流开发' }
		]
	}
]

favorites demo

[
	{
		id: 1,
		menuApplicationId: 11,
		title: '数据服务开发'
	}
]