摘要
经过一年多时间积累和沉淀，基于element-plus的中后台业务组件库——ideaz-element，正式开源啦~。诚挚邀请各位小伙伴进行试用和交流，同时热烈欢迎对开源、组件库任意之一感兴趣的同学参与到ideaz-element组件库的建设中来~🙌
背景
为什么是中后台业务组件库
19年参加工作，一直主要做PC端业务，对PC端组件库如：element-plus、iview、ant-design-vue等较为熟悉。在业务开发过程中，往往需要在这些基础的组件上继续封装或者拷贝代码才能实现需求，因此就产生了封装一套业务组件库的想法，把常规的中后台业务和自己多年的开发经验沉淀下来。
之前想着这套组件库能够同时支持element-plus和element-ui，但无奈工作量太大，需要处理的细节过多，在实现了几个组件后放弃了。
为什么自己做组件库
- 热爱代码，热爱开源，想做更多的事情。
- React生态中@ant-design/pro-components的业务组件很完善，但是Vue生态中，还没有一款这么强大的业务组件库
为什么是element-plus
- 更新频繁，star较多
- 相对于
iview、ant-design-vue等组件库更为熟悉 - 后续用户反馈好，或时间充足会用类似的
自定义Schema支持更多的组件库
Ideaz Element组件库
特性
- 基于
element-plus的中后台业务组件库，支持Vue3生态 10+个高质量组件，覆盖中后台主流场景- 使用
TypeScript和TSX编写，提供完整的类型定义 - 组件内部逻辑均使用
hooks封装 - 支持按需引入
- 完善的自动化测试用例
组件
目前开发了10+高质量组件，这里简单介绍两个业务中会最常用的组件，其他具体组件不在此一一列举，大家可以查看文档进行体验。文档地址：Ideaz Element | (naivesteven.github.io)
Form组件
Form组件支持常规表单、组表单、数组表单、折叠表单、步骤表单、筛选表单
组件内部会默认配置一些字段，如：clearable、filterable、placeholder等属性。
通过如下配置表单项，即可实现上面视图，支持自由的自定义配置（插槽和、render函数、全局组件、局部组件）。
const columns = [
{
component: ElInput,
field: 'name',
label: '姓名',
required: true,
},
{
component: 'select',
field: 'gender',
label: '性别',
tooltip: '提示',
extra: '额外信息',
},
{
component: 'el-date-picker',
field: 'time',
label: '出生日期',
fieldProps: {
type: 'daterange',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
},
},
{
slot: 'button',
},
]
Crud组件
Crud组件是最核心的组件，基于内部的Form组件和Table组件封装。支持通过简单配置实现增删改查功能。
通过如下的配置，即可生成上面的筛选表单和表格项，直接实现增删改查。组件支持直接配置Api处理数据，也支持手动处理。
const columns = ref([
{
prop: 'name',
label: '姓名',
form: {
component: 'input',
label: '姓名',
field: 'name',
},
},
{
prop: 'gender',
label: '性别',
form: {
component: 'select',
label: '性别',
field: 'gender',
},
},
{
prop: 'age',
label: '年龄',
form: {
component: 'input',
label: '年龄',
field: 'age',
},
},
{
prop: 'time',
label: '出生日期',
},
])
组件内部集成了可编辑表格、前端分页、拖拽、权限显示等功能。后续还会继续添加和完善。
后续规划
组件库后续将重点在以下几个方面进行迭代，希望对开源以及对组件库感兴趣的同学可以一块参与建设。
- 更加完善的组件测试用例。作为可持续高质量迭代的组件库，将持续性的丰富我们的用例集和用例质量，以保证组件库高质量发展。
- 丰富功能。虽然表单和表格等组件的功能覆盖了大多数的业务场景，但仍不满足很多特殊场景的需求，因此会继续丰富组件功能。
- 开源社区的建议。积极收集来自社区的声音，集合到后续规划中，同时也非常欢迎社区同学能积极输入。
- 低代码工具。过段时间会开源基于
ideaz-element的低代码工具，希望能够让大家更方便、更快捷的使用组件库。
最后
感谢您阅读到最后，欢迎您体验组件库，有任何问题，您都可以提issue或进群交流。大佬轻喷。
最后，欢迎大家star😆，以及进群交流。
Github：
