@jk998/peace-element-ui

基于 element-ui 库二次开发的 UI 库

前置安装

yarn add @jk998/library
yarn add element-ui

安装

yarn add @jk998/peace-element-ui

使用示例

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

<PeaceTable ref="table" pagination>
  <PeaceTableColumn label="姓名"></PeaceTableColumn>
  <PeaceTableColumn label="年龄"></PeaceTableColumn>
  <PeaceTableColumn label="状态"></PeaceTableColumn>
  <PeaceTableColumn label="操作"></PeaceTableColumn>
</PeaceTable>

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

<PeaceDialog v-bind:visible.sync="visible"></PeaceDialog>

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

<PeaceButton v-on:click="clickHandler"></PeaceButton>

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

<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

<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

• 🔥 发布首个公开版本