@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

1. 因为是全局引入的，使用的时候不用再导入了 koala-header、koala-side

2. 面包屑改为：

   <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>

   3. 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、表单

1. class="no-mb" 可以去掉表格默认margin-bottom
2. 一般只有一个primary按钮
3. search-form 和 普通form要分开，主要是label颜色不同
4. el-table.table-rows-10 10行的标准高度

7. 接口对接

1. 删除localStorage：isAuth appKey

2. 增加以下代理，并且把所有代理改为网关地址，除了websocket：

   proxy: {
     '/access': {
       target: 'http://10.10.8.5:32001',
       changeOrigin: true
     },
   }

3. 需要去掉之前自动跳转到sso页面的逻辑，在 router.beforeEach 和 http.js 里面

4. header增加事件@loginSuccess，所有的接口调用必须在 @loginSuccess的回调里面，不然会导致接口获取不到token

5. 获取当前的routes: 组件 @getRoutes="handleGetRoutes"

8. 文件上传组件 koala-upload 参数说明

| 参数 | 说明 | | --------------------------- | ------------------------------------------------------------ | | scene | 场景 | | auto-upload | 是否自动上传 | | triggerUpload | 如果auto-upload为true，需要传一个随机数来触发上传动作 | | @getPercent | 1、如果是单文件，返回百分比数值，如：562、如果是多文件，返回已上传文件的个数 | | @getFileId | 1、如果是单文件，返回该文件的id2、如果是多文件，返回已上传文件的id列表，如 ['id1', 'id2', ...] | | @getSuccessList | 返回成功上传文件的列表，里面包含文件id：示例：[{id: '', name: '', size: '', status: '', uid: '', url: ''}] | | @getErrorList | 返回成功上传文件的列表，不包含文件id | | startUpload(customFileList) | customFileList: [{name: '', size: '', status: 'ready', raw: File}] |