@koala/yibin-ui NPM

@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、如果是单文件，返回百分比数值，如：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}