1.0.4 • Published 6 years ago
gac-menu v1.0.4
gac-menu
element-ui 菜单的二次开发Build Setup
# install dependencies
npm install gac-menu# Project is running at http://localhost:8080/
npm run dev# build for production with minification
npm run buildAbout dependencies element-ui
import Vue from 'vue'
import { Row,Col,Menu,Submenu,MenuItem } from 'element-ui'
import 'gac-header-demo/src/lib/theme/index.scss'
Vue.use(Row)
Vue.use(Col)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)Documentation
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| menusData | 菜单数据(必填) | Array | - | - |
| isShowCollapse | 是否水平折叠收起菜单 | boolean | - | true |
| isRouter | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | - | true |
| backgroundColor | 菜单背景颜色（仅支持 hex 格式） | string | - | '#333333' |
| textColor | 菜单字体颜色（仅支持 hex 格式） | string | - | '#FFFFFF' |
| activeTextColor | 菜单选中字体颜色（仅支持 hex 格式） | string | - | '#006EFF' |
| width | 菜单宽度 | string | - | 189 |
| top | 菜单距离页面顶部的值 | string | - | 55 |
Example
首先在项目的入口文件（main.js）中引入
import GacMenu from 'gac-menu'
Vue.use(GacMenu)然后使用该组件
menus: {
menusData: [
{
"uri": "major",
"name": "主系统",
"children": [
{
"uri": "major-portal/accountManage",
"name": "账号管理",
"children": [
{
"uri": "major-portal/accountManage/factory",
"name": "车厂账号管理",
"children": [],
},
{
"uri": "major-portal/accountManage/dealer",
"name": "经销商账号管理",
}
],
"label": null
},
{
"uri": "major-portal/roleManage",
"name": "角色权限管理",
"children": [],
}
]
}
],
isShowCollapse: true,
isRouter: true,
backgroundColor: '#333333',
textColor: '#fff',
activeTextColor: '#006EFF',
width: '189px',
top:'55px'
}
}