# ElementUI二次封装组件库
> 基于[Element-UI](https://element.eleme.cn/#/zh-CN/component/quickstart) 封装常用组件，部分组件参考[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)

---
## 一. 版本须知
> 为避免异常问题，安装需锁定版本

| 稳定版本 | 版本支持|
|-|-|
|0.4.7|按需加载组件，初版|

> 没有安装依赖库会提示错误

|依赖库|版本|
|-|-|
|[Element-UI](https://github.com/ElemeFE/element)|2.15.8（最新的2.15.9有bug不知道修复没，推荐使用2.15.8）|
|[dayjs](https://github.com/iamkun/dayjs)|最新版本|

----
## 二. 当前组件
> 不建议使用以及未完成的组件不会显示在下表

|组件名称|说明|
|-|-|
|ZTable|配置化生成table表格，自带分页|
|ZForm|配置化生成各种基础组件，支持水平多个|
|ZConditions|table的查询条件组件，配置同ZForm|
|ZObjectShow|展示数据组件|
|ZUpload| 支持限制图片宽高，以及图片压缩|
|WlmLayout| 左侧菜单栏与顶部栏位，需要特定数据，针对当前管理系统|


-----
## 三. 安装
> 支持全局安装与按需加载，按需加载使用Element UI的[babel-plugin-component](https://github.com/ElementUI/babel-plugin-component/blob/master/src/core.js)
### 全局安装

推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用，建议锁定版本号。

```shell
npm i @varonervar/components@稳定版本号 -S
```

### CDN

目前可以通过 [unpkg.com/@varonervar/components](https://unpkg.com/@varonervar/components/) 获取到最新版本的资源，由于依赖[Element-ui](https://github.com/ElemeFE/element)和[dayjs](https://github.com/iamkun/dayjs)，如果使用CDN，请先之前引入eleemnt-ui和dayjs的CDN。

```html
<!-- 引入Element-ui 和dayjs，保证顺序在之前，不然报错 -->

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/@varonervar/components/theme-chalk/lib/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/@varonervar/components/lib/index.js"></script>
```

:::tip
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。
:::

-------
## 四. 快速上手

### 完整引入

在 main.js 中写入以下内容：

```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import WlmComponent from '@varonervar/components'
import 'element-ui/lib/theme-chalk/index.css';
import '@varonervar/components/theme-chalk/lib/index.css';
import App from './App.vue';

Vue.use(ElementUI);
Vue.use(WlmComponent);

new Vue({
  el: '#app',
  render: h => h(App)
});
```

以上代码便完成了 `@varonervar/components` 的引入。需要注意的是，样式文件需要单独引入。

### 按需引入

借助 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 `babel-plugin-component`：

```bash
npm install babel-plugin-component -D
```

然后，将 babel.config.js 修改为：

```json
{
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "@varonervar/components",
        "styleLibraryName": "~node_modules/@varonervar/components/theme-chalk/lib"
      }
    ]
  ]
}
```

接下来，如果你只希望引入部分组件，比如 `ZTable` 和 `ZForm`，那么需要在 main.js 中写入以下内容：

```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import { ZTable, ZForm } from '@varonervar/components';
import App from './App.vue';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.component(ZTable.name, ZTable);
Vue.component(ZForm.name, ZForm);
/* 或写为
 * Vue.use(ZTable)
 * Vue.use(ZForm)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});
```

完整组件列表和引入方式（完整组件列表以 [src/index.js](https://github.com/wo-platform/components/blob/dev/1.1.0/components/src/index.js) 为准）

```javascript
import Vue from 'vue';
import {
  WlmLayout,
  ZConditions,
  ZForm,
  ZObjectShow,
  ZTable,
  ZUpload
} from 'element-ui';

Vue.use(ZUpload);
Vue.use(ZTable);
Vue.use(ZObjectShow);
Vue.use(ZForm);
Vue.use(ZConditions);
Vue.use(WlmLayout);

```

---
## 计划与分工

### 计划
* 增加changelog
* 增加单元测试
* 增加沃平台包装组件

### 分工
|开发人员|开发组件|
|-|-|
|[钟振业](https://github.com/johyin)|ProTable、ZRadioButton|
|[卿松](https://github.com/varOneVar)|其他|