npm package: @jk998/peace-element-ui
Description: 基于 element-ui 库二次开发的 UI 库
Latest version: 0.1.43

# @jk998/peace-element-ui

基于 element-ui 库二次开发的 UI 库

# 前置安装

```sh
yarn add @jk998/library
yarn add element-ui
```

# 安装

```sh
yarn add @jk998/peace-element-ui
```

# 使用示例

```javascript
import { name, version } from '/package.json'
import Vue from 'vue'

// 加载 library
import Peace from '@jk998/library'
Vue.use(Peace, {
  config: {
    appName: name,
    appVersion: version
  }
})

// 加载 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 加载 jk998 peace-elemetn-ui
import PeaceElementUI from '@jk998/peace-element-ui'
import '@jk998/peace-element-ui/dist/peace-element-ui.css'
Vue.use(PeaceElementUI)

export default {
  name: 'App'
}
```

# PeaceTable

```html
<PeaceTable ref="table" pagination>
  <PeaceTableColumn label="姓名"></PeaceTableColumn>
  <PeaceTableColumn label="年龄"></PeaceTableColumn>
  <PeaceTableColumn label="状态"></PeaceTableColumn>
  <PeaceTableColumn label="操作"></PeaceTableColumn>
</PeaceTable>
```

```javascript
this.$refs.table.reloadData()
```

## Attributes

| 参数                 | 说明                                  | 类型    | 可选值       | 默认值   |
| -------------------- | ------------------------------------- | ------- | ------------ | -------- |
| ...                  | element-ui-table 所有 Attributes      |         |              |          |
| ...                  | element-ui-pagination 所有 Attributes |         |              |          |
| pagination           | 是否启用分页                          | Boolean | true / false | false    |
| emptyText            | 记录为空文本                          | String  |              | 暂无数据 |
| emptyImage           | 记录为空图片                          | String  |              |          |
| tableProps           | 分页、排序字段设置                    | Object  |              |          |
| tableProps.pageIndex | 分页组件-当前页                       | String  |              | p        |
| tableProps.pageSize  | 分页组件-当前页总数                   | String  |              | size     |
| tableProps.sort      | 排序组件-当前排序字段                 | String  |              | sort     |
| tableProps.order     | 排序组件-当前排序规则                 | String  |              | order    |

## Events

| 参数 | 说明                         | 类型 | 可选值 | 默认值 |
| ---- | ---------------------------- | ---- | ------ | ------ |
| ...  | element-ui-table 所有 Events |      |        |        |

## Function

| 参数       | 说明                           | 类型 | 可选值 | 默认值 |
| ---------- | ------------------------------ | ---- | ------ | ------ |
| ...        | element-ui-table 所有 Function |      |        |        |
| loadData   | 使用传递参数从当前页加载数据   |      |        |        |
| reloadData | 使用传递参数从第一页加载数据   |      |        |        |

## Slots

| 参数 | 说明                        | 类型 | 可选值 | 默认值 |
| ---- | --------------------------- | ---- | ------ | ------ |
| ...  | element-ui-table 所有 Slots |      |        |        |

# PeaceDialog

```html
<PeaceDialog v-bind:visible.sync="visible"></PeaceDialog>
```

```javascript
this.visible = true

this.visible = false
```

## Attributes

| 参数                 | 说明                               | 类型   | 可选值 | 默认值 |
| -------------------- | ---------------------------------- | ------ | ------ | ------ |
| ...                  | element-ui-dialog 所有 Attributes  |        |        |        |
| top                  | Dialog CSS 中的 margin-top 值      | string |        | 10vh   |
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | string |        | false  |
| width                | Dialog 的宽度                      | string |        | 600px  |

## Events

| 参数 | 说明                          | 类型 | 可选值 | 默认值 |
| ---- | ----------------------------- | ---- | ------ | ------ |
| ...  | element-ui-dialog 所有 Events |      |        |        |

## Slots

| 参数 | 说明                         | 类型 | 可选值 | 默认值 |
| ---- | ---------------------------- | ---- | ------ | ------ |
| ...  | element-ui-dialog 所有 Slots |      |        |        |

# PeaceButton

```html
<PeaceButton v-on:click="clickHandler"></PeaceButton>
```

```javascript
const clickHandler = () => {}
```

## Attributes

| 参数         | 说明                              | 类型    | 可选值 | 默认值 |
| ------------ | --------------------------------- | ------- | ------ | ------ |
| ...          | element-ui-button 所有 Attributes |         |        |        |
| throttle     | 是否开启节流                      | boolean |        | true   |
| throttleTime | 节流间隔时间(ms)                  | Number  |        | 1000   |

## Events

| 参数 | 说明                          | 类型 | 可选值 | 默认值 |
| ---- | ----------------------------- | ---- | ------ | ------ |
| ...  | element-ui-button 所有 Events |      |        |        |

## Slots

| 参数 | 说明                         | 类型 | 可选值 | 默认值 |
| ---- | ---------------------------- | ---- | ------ | ------ |
| ...  | element-ui-button 所有 Slots |      |        |        |

# PeaceDatePicker

```html
<PeaceDatePicker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" v-model="model.date"> </PeaceDatePicker>
```

## Attributes

| 参数          | 说明                                   | 类型    | 可选值 | 默认值 |
| ------------- | -------------------------------------- | ------- | ------ | ------ |
| ...           | element-ui-date-picker 所有 Attributes |         |        |        |
| unlink-panels | 是否强关联日期                         | Boolean |        | false  |

## Events

| 参数 | 说明                               | 类型 | 可选值 | 默认值 |
| ---- | ---------------------------------- | ---- | ------ | ------ |
| ...  | element-ui-date-picker 所有 Events |      |        |        |

## Slots

| 参数 | 说明                              | 类型 | 可选值 | 默认值 |
| ---- | --------------------------------- | ---- | ------ | ------ |
| ...  | element-ui-date-picker 所有 Slots |      |        |        |

# [PeaceCountdown](!https://github.com/fengyuanchen/vue-countdown)

```html
<PeaceCountdown v-bind:time="100000000">
  <template slot-scope="props"> {{ props }} </template>
</PeaceCountdown>
```

## Attributes

| 参数 | 说明                      | 类型 | 可选值 | 默认值 |
| ---- | ------------------------- | ---- | ------ | ------ |
| ...  | countdown 所有 Attributes |      |        |        |

## Events

| 参数 | 说明                  | 类型 | 可选值 | 默认值 |
| ---- | --------------------- | ---- | ------ | ------ |
| ...  | countdown 所有 Events |      |        |        |

## Slots

| 参数 | 说明                 | 类型 | 可选值 | 默认值 |
| ---- | -------------------- | ---- | ------ | ------ |
| ...  | countdown 所有 Slots |      |        |        |

# 更新记录

## [0.1.43] - 2021-06-29

- 🔥 PeaceTable 支持当表格进行数据请求时，默认展示等待效果

## [0.1.41 - 0.1.42] - 2021-06-09

- 🔥 el-tree 样式优化

## [0.1.40] - 2021-06-09

- 🔥 PeaceInput 默认 maxlength
- 🔥 PeaceSelect 默认 clearable 和 filterable

## [0.1.39] - 2021-06-03

- 🔥 使用 HOC 升级 table column
- 🔥 优化 select close 颜色

## [0.1.38] - 2021-05-25

- 🔥 兼容 peace-table 分页结果为 records 结构

## [0.1.25 - 0.1.37] - 2021-04-25

### Added

- 🔥 新增 tree-select 组件，支持搜索
- 🔥 优化 form 样式, 支持 space-view、space-xs、space-sm、space-md、space-lg、space-xl
- 🔥 优化 table 样式
- 🔥 优化 tab 样式
- 🔥 优化 dialog 样式
- 🔥 优化 input、daterange、radio、checkox、select、button 样式

## [0.1.16 - 0.1.24] - 2021-03-10

### Changed

- 🔥 优化组件库样式
- 🔥 使用 rollup-plugin-postcss 处理样式文件
- 🐛 修复 peace-multiple-select 多实例错误

## [0.1.15] - 2021-01-19

### Changed

- 🔥 新增 peace-multiple-select 组件，所有属性、事件继承 el-select
- 🔥 优化组件库样式

## [0.1.14] - 2021-01-06

### Changed

- 🐛 修复 peace-table loadData 方法参数覆盖的问题
- 现版本 reloadData | loadData 表现一样，推荐使用 reloadData

## [0.1.12] - 2020-11-23

### Changed

- 🐛 优化 tree 在 highlight 模式下的展现

## [0.1.11] - 2020-11-23

### Changed

- 🐛 优化样式, 优化 docs-src 调试模式

## [0.1.10] - 2020-11-23

### Changed

- 🐛 修复 peace-table filter 在 loadData 时可能不生效的问题

## [0.1.9] - 2020-11-23

### Changed

- 🐛 修改 peace-table filter 函数在分页时不生效的问题

## [0.1.8] - 2020-11-04

### Changed

- 🐛 修改 el-select 、el-autocomplete 在不同浏览器上可能显示不正常的问题

## [0.1.7] - 2020-11-02

### Changed

- 🐛 修改 PeaceTable 分页查询，默认传递 'p' 和 'current'

## [0.1.6] - 2020-10-21

### Changed

- 🐛 修复 PeaceDatePicker 默认样式，提升优先级

## [0.1.5] - 2020-10-19

### Changed

- 🐛 修改 PeaceTable 无数据默认文案为 "暂无数据"

## [0.1.4] - 2020-10-19

### Changed

- 🐛 修复 PeaceTable 刷新页码不对的问题

## [0.1.3] - 2020-10-14

### Changed

- 🐛 修复 PeaceDatePicker HOC，可以正确接收传递参数了
- 🐛 修复 PeaceDialog HOC，可以正确接收传递参数了

## [0.1.2] - 2020-10-13

### Changed

- 🔥 修改 PeaceTable => pagesize 默认 10

## [0.1.1] - 2020-10-10

### Added

- 🔥 新增 PeaceCount 组件

### Changeed

- 🔥 PeaceButton 默认启用 throttle

## [0.1.0] - 2020-09-29

### Added

- 🔥 发布首个公开版本