0.2.3 • Published 6 years ago
ls-nav v0.2.3
nav
cq-nav 魔数通用导航栏组件
Usage
sudo mnpm install @bfe/cq-nav
# app.js
import cqNav from 'cq-nav';
import '@bfe/cq-nav/dist/cq-nav.css'; //单独引入cq-nav导航组件的样式
Vue.use(cqNav);
# Home.vue
<cq-nav> </cq-nav>Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| user-name | 登录用户名 | string | - | '' |
| mis-id | 登录用户misId | string | - | '' |
| logo-url | logo路径 | string | - | https://file.neixin.cn/pan/im/2/image/AmnYKAlRpVN9mbkwKbefZ0MbJHR5ykYMk3kHSYVMHEdzYMrCPNe5Mv1qx3hi7O8hmQ?filename=logo.png |
| active-menu | 当前菜单栏 | string | 魔数默认导航栏名称 | 首页 |
| menu-data | 自定义菜单格式 | array | - | 魔数默认导航栏列表（见下） |
| no-select-current-menu | 点击当前菜单栏无效（不跳转） | boolean | - | false |
| menu-skip-not-allowed | 点击菜单不允许跳转到对应url, 可配合select事件自定义跳转方式 | boolean | - | false |
| query-method | 搜索，可自定义方法 | function | - | 默认方法 |
| logout-method | 退出登录，可自定义方法 | function | - | 默认方法 |
| input-show | 是否显示搜索框 | boolean | - | true |
| icon-data | 自定义右侧图标格式 | array | - | 魔数默认图标列表（见下） |
Menu Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| select | 菜单激活回调 | item: 选中菜单项信息 |
menu-data
menuData: [
{
key: MY_BOARD,
value: '首页',
url: '/'
// disabled: true 该菜单是否禁用
},
{
key: DATA_SOURCE,
value: '数据源',
submenu: true,
children: [
{
key: DATA_SET,
value: '数据集',
url: 'http://adam.dp/adam/warehouse/regno'
},
{
key: CUBE,
value: 'Cube 连接',
url: '/cube'
},
]
},
{
key: SELF_DATA,
value: '自助取数',
submenu: true,
children: [
{
key: SQL_QUERY,
value: 'SQL查询',
url: '/sql'
}
]
},
{
key: ANALYSE_APPLY,
value: '分析应用',
submenu: true,
children: [
{
key: ANALYSIS,
value: '分析板',
url: '/analysis'
},
{
key: DASHBOARD,
value: 'Dashboard',
url: '/dashboard'
},
{
key: EMAIL_REPORT,
value: '邮件报表',
url: '/mail'
},
{
key: PORTAL,
value: 'Portal',
url: '/portal'
}
]
},
{
key: RESOURCE_MANAGEMENT,
value: '资源管理',
submenu: true,
children: [
{
key: AUTHORITY_MANAGEMENT,
value: '权限管理',
url: '/dacs'
},
{
key: RESOURCE_MONITOR,
value: '资源监控',
url: 'https://bi.sankuai.com/portal/20530'
},
{
key: PORTAL_BUILDER,
value: '门户构建器',
url: '/portalX'
}
]
}
]icon-data
iconData: [
{
iconClass: 'iconfont icon-cq-icon-dictionary',
url: 'https://bi.sankuai.com/meta',
// hover是显示的提示文案
text: '资源检索',
// 是否打开新窗口
openNew: true
},
{
iconClass: 'iconfont icon-cq-icon-help',
url: 'https://123.sankuai.com/km/page/61118375',
text: '帮助中心',
openNew: true
}
]