@koalayibin-ui使用文档
1、package.json
"koala-header": "2.0.6", // 需删除
安装最新@koala/yibin-ui:
npm i @koala/yibin-ui -S
vue.config.js配置需增加:
transpileDependencies: ['@koala/yibin-ui'],
2、main.js 和 postcss.config.js
// 注释掉原来的styles,(注意如果有使用,请单独提出来)
// import '@/styles/index.scss'
import YibinUI from '@koala/yibin-ui'
Vue.use(YibinUI)
import '@koala/yibin-ui/dist/style.css'
// 去掉flexible
// import 'amfe-flexible'
// 使用mini大小
Vue.use(ElementUI, { size: 'mini' })
// 直接修改ElementUI默认值
ElementUI.Dialog.props.appendToBody.default = true
postcss.config.js 去掉 postcss-pxtorem 的配置
3、src\views\layout\index.vue
-
因为是全局引入的,使用的时候不用再导入了 koala-header、koala-side
-
面包屑改为:
<template #sub-header-left> <el-breadcrumb v-if="!$route.meta.hideBread" separator="/"> <template v-for="route in $route.matched"> <el-breadcrumb-item v-if="route.path != ''" :key="route.path" :to="{ path: route.path }" > {{ route.meta.title }} </el-breadcrumb-item> </template> </el-breadcrumb> </template>
- koala-side 组件 :activeIndex="activeRoute",activeRoute: '' 初始值为空
4、弹窗按钮
新建:取消,确认。
编辑:取消,保存。
查看/只读:关闭
5、Dialog组件:src\components\KL-Dialog\index.vue
append-to-body 默认值改为true,因为可能出现模态框背景遮住弹窗的情况:
ElementUI.Dialog.props.appendToBody.default = true
6、表单
- class="no-mb" 可以去掉表格默认margin-bottom
- 一般只有一个primary按钮
- search-form 和 普通form要分开,主要是label颜色不同
- el-table.table-rows-10 10行的标准高度
7. 接口对接
-
删除localStorage:isAuth appKey
-
增加以下代理,并且把所有代理改为网关地址,除了websocket:
proxy: { '/access': { target: 'http://10.10.8.5:32001', changeOrigin: true }, }
-
需要去掉之前自动跳转到sso页面的逻辑,在 router.beforeEach 和 http.js 里面
-
header增加事件@loginSuccess,所有的接口调用必须在 @loginSuccess的回调里面,不然会导致接口获取不到token
-
获取当前的routes: 组件 @getRoutes="handleGetRoutes"
8. 文件上传组件 koala-upload 参数说明
参数 | 说明 |
---|---|
scene | 场景 |
auto-upload | 是否自动上传 |
triggerUpload | 如果auto-upload为true,需要传一个随机数来触发上传动作 |
@getPercent | 1、如果是单文件,返回百分比数值,如:56 2、如果是多文件,返回已上传文件的个数 |
@getFileId | 1、如果是单文件,返回该文件的id 2、如果是多文件,返回已上传文件的id列表,如 ['id1', 'id2', ...] |
@getSuccessList | 返回成功上传文件的列表,里面包含文件id: 示例:[{id: '', name: '', size: '', status: '', uid: '', url: ''}] |
@getErrorList | 返回成功上传文件的列表,不包含文件id |
startUpload(customFileList) | customFileList: [{name: '', size: '', status: 'ready', raw: File}] |