nce-library
更新自:2022-07-27,版本0.1.19
download
npm install nce-library
yarn add nce-library
按需引入
import { NceNav, NceHeader, NcePlantform, NceFooter } from "nce-library";
import "nce-library/dist/index.css";
Vue.use(NceNav);
Vue.use(NceHeader);
Vue.use(NcePlantform);
Vue.use(NceFooter);
全部导入
import NceLibrary from "nce-library";
import "nce-library/dist/index.css";
Vue.use(NceLibrary);
具体文档
Nce-Nav
import { NceNav } from "nce-library";
Vue.use(NceNav);
<nce-nav
userName="张三"
:userAvatar="userAvatar"
:userRoutes="userRoutes"
@handleClickToPage="handleClickToPage"
@handleToHomePage="handleToHomePage"
></nce-nav>
Attributes
参数 |
说明 |
类型 |
默认值 |
是否必传 |
platformName |
平台名 |
String |
工作台 |
true |
userName |
右上角用户 |
String |
|
true |
userAvatar |
右上角用户头像 |
String |
|
false |
userRoutes |
平台自己定义的路由表 |
Array |
[] |
true |
useCustomerRoute |
不启用下拉菜单(nce-nav 专用,用于区分其他平台) |
Boolean |
false |
false |
rightMenuList |
右上角菜单 |
Array |
[] |
true |
plantFormMenuList |
每个平台自己的菜单(用于单独配置) |
Array |
[] |
true |
Methods
方法名 |
说明 |
参数 |
handleClickToPage |
点击菜单 |
菜单信息 |
handleToHomePage |
回到首页 |
|
Slot
设置 logo 或者其他文字
<nce-nav
userName="张三"
:userAvatar="userAvatar"
:userRoutes="userRoutes"
@handleClickToPage="handleClickToPage"
@handleToHomePage="handleToHomePage"
>
<img src="图片" /> 或者 文字
</nce-nav>
NceHeader
import { NceHeader } from "nce-library";
Vue.use(NceHeader);
<nce-header
targetType="_self"
:logoImg="logoImg"
@backPortal="backPortal"
@toWorkbench="toWorkbench"
/>
Attributes
参数 |
说明 |
类型 |
可选参数 |
type |
平台名 |
String |
|
targetType |
跳转页面方式 |
String |
_self or _blank |
logoImg |
左上角 logo |
String |
|
host |
跳转域名(单独部署可用,不传默认是 location.host) |
String |
|
Methods
方法名 |
说明 |
toWorkbench |
跳转到工作台 |
backPortal |
回到首页 |
NceFooter
import { NceFooter } from "nce-library";
Vue.use(NceFooter);
<nce-footer>
<template #copyright>世纪高通 | MineData@Earth Enterprise v3.3.1</template>
<template #description
>Copyright 2017-2020 Cennavi All Rights Reserved, Beijing Cennavi Technology
Co.,Ltd.</template
>
</nce-footer>
插槽
参数 |
说明 |
类型 |
copyright |
公司名 |
String |
description |
介绍 |
String |
NcePlantform
import { NcePlantform } from "nce-library";
Vue.use(NcePlantform);
<nce-plantform
:platformName="platformName"
:show="show"
@handleToHomePage="handleToHomePage"
/>
Attributes
参数 |
说明 |
类型 |
默认值 |
platformName |
平台名 |
String |
工作台 |
show |
是否显示下级菜单 |
Boolean |
|
Methods
方法名 |
说明 |
handleToHomePage |
回到首页 |