zc-web-component

卓诚统一框架通用组件库

注意：尽量不要使用 alpha 版本，可能会有较多BUG

技术栈

1. vue3.0
2. 字体图标

• font-awesome
• npm install font-awesome --save // 字体图标
• yarn add font-awesome

安装组件

yarn add zc-web-component

在入口代码中增加服务器接口地址的配置，这里假设是main.ts

// 引入组件 version < 1.0.0
import ZcWebComponent, { ConfigManager } from "zc-web-component";

// 引入组件及样式 version >= 1.0.0
import ZcWebComponent, { ConfigManager } from "zc-web-component";
import 'zc-web-component/dist/style.css'

// 在入口文件中配置接口地址，用于获取数据
ConfigManager.setComponentConfig({
    baseUrl: 'http://yourhostname/api/',
    baseUploadUrl: '',
    baseDownloadUrl: '',
    baseImageUrl: '',
    platformCode: "sys-platform",
    loginUrl:'http://localhost',
    hasTagsView:false,//是否启用标签页和侧边栏混合导航
    verifyCode: false, //是否使用code做验证
    hasOnLevel: false, // 是否开启侧边菜单展开收起功能
    openLevel: -1, // 展开几层菜单
})

// Vue2.0 引用
Vue.use(ZcWebComponent)

// Vue3.0 引用
app.use(ZcWebComponent)

// 获取登录信息，如果地址上有传过来的token将会存入cookie中
// version < 0.1.4
ConfigManager.loginCover();
//更新loginCover使用
// version >= 0.1.4
ConfigManager.loginCover(()=>{ 
    // 组件和子系统的app.use()挂载内容放置位置
});

弹窗登录说明

• 1、登录调用基础平台登录页登录接口
• 2、取消后跳转loginUrl地址即登录地址
• 3、弹窗登录只针对组件库code和token过期或失效

axios 配置自动引用 cookie

axiox.defaults.withCredentials = true

最后在Vue页面中引用组件即可，无需单独引入组件

<!-- 使用“通用菜单”组件时在“母版页”或需要的页面中增加如下标签即可 -->
<ui-header/>

<!-- 使用“通用菜单”组件时在“母版页”或需要的页面中增加如下标签即可 -->
注意事项：各自项目的本地路由path必须和获取到的路由完全相同
<ui-tags-nav/>

新增功能

功能

• 侧边菜单展开收起功能
• 新增跳转子系统菜单高亮

使用

在ConfigManager.setComponentConfig 中添加配置参数

• hasOnLevel: false, 是否开启侧边菜单展开收起功能(默认false不开启)
• openLevel: -1, 展开几层菜单(生效前提：已经开启菜单展开收起功能)

注意事项

父级菜单即没有对应页面的菜单route必须为空，否则会影响展开收起功能的使用

范例

文件后缀带有sample.json的是数据格式范例，可以作为参考

1、插件项目打包

yarn pack

2、本地安装测试的项目（注意：项目中安装本地打包的插件时候，先停止运行项目，再安装，不停止可能导致安装失败，报错等）

yarn add 打包后的本地路径

3、查看缓存

yarn cache list

4、清除缓存

yarn cache clean

5、删除安装包

yarn remove [package]

package.json 中的依赖显示

{ "zc-web-component": "C:\\zc-web-component-v0.0.1-alpha-17.tgz" }

后续可通过 npm install zc-web-component 直接调试