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 | 回到首页 |