来试试这款VueCompositionApi开发的React组件库——plain-design

peryl
1,364 阅读4分钟

概览

大家好，我是peryl，今天给大家带来个人开源的React组件库：plain-design；废话不多说，直接上才艺；

theme_1.png

theme_2.png

theme_3.png

theme_4.png

theme_5.png

theme_6.png

theme_7.png

特性

  • 完全个人原创，某些组件的API用法可能参考了目前主流组件库的方案，但是实现原理绝对大不相同，主要是为了降低开发者的组件上手学习成本；
  • 支持在已有的React项目中经过简单地配置即可使用，包括cra,umi,vite,vue-cli等等。如果你是比较老的项目，希望基于静态HTML构建，那也是可以的，上手速度就是快！不同构建工具使用方式可以参考文档：plain-design 快速上手；
  • 支持自定义主题色、组件按需引入、图标按需加载等等；轻量级依赖，主包经过gzip压缩之后只有200k，css在gzip压缩之后只有50多k。虽然体积不大，但是组件的数量不少。
  • 文档支持在线调试，极速打开，无需翻墙。所见即所得，文档中的所有示例都是基于其调试的代码生成，不会出现示例与调试源码不一致的情况；
  • 虽然是一个React组件库，但是所有组件都是使用CompsitionApi + Typescript + JSX实现，如果你希望学习在React开发中掌握更多的CompositionApi开发技能，那么plain-design组件是绝佳的学习对象；
  • 拥有强大的日期组件，支持年、年月、年月日、年月日时间、周、季度六种视图，并且每种视图都支持单选、范围选择以及限制最大最小时间、除了年月日时间视图之外，其他视图都支持多选。
  • 强大的树组件，支持单选、多选、懒加载、虚拟滚动以及拖拽，并且自带有滚动条样式优化；
  • 强大的基础表格组件：支持分组表头、固定头和列、作用域插槽自定义内容、展开列、树形表格（拥有树组件的所有特性）、行拖拽排序、列拖拽排序、合并行和列、虚拟滚动、行内编辑以及表单校验等功能，并且自带有滚动条样式优化；
  • 除此之外，还有其他很多组件有不少亮眼的特性等待探索；

最后是组件库的核心：可编辑表格——PlTablePro，PlTablePro是一个具有综合业务能力的业务表格，目的在于日常开发中，通过少量的配置信息就可以实现满足强大的业务功能，具体功能特性如下所示：

  • 编辑：表格的的数据增删改功能，包括表格行内编辑，多行编辑（批量提交），表单编辑（自动生成弹框表单）、批量修改（选中要修改的字段以及行批量修改）、批量删除；
  • 筛选：搜索栏、筛选表单、列搜索、去重筛选、高级筛选以及自定义表达式筛选；
  • 排序：单字段排序以及多字段组合排序；
  • 个性化设置：修改列的基本信息，比如列名称、宽度，是否固定列，是否隐藏、列顺序等等；
  • 配置缓存：将当前的筛选参数以及个性设置缓存到本地，可以随意切换；
  • 数据导入导出；
  • 丰富的可编辑列，目前已有的列包括：输入框列、省市县联动列、复选框列、颜色列、日期列、评分列、图片列、数字列、对象选择列、下拉列、文本域列、开关列等等；
  • 丰富的快捷键支持；

其他

  • 因为是个人开源的组件库，所以算不上是什么大制作，大家不要对其抱有太大的期待；比如一些组件的设计物料啥的是没有的；
  • 开发组件库的主要目的在于持续学习，其中绝大部分组件都是原创。原创的意思是设计思路或者实现源码是原创，但是组件的API用法大部分情况下会参考已有的组件库，比如一些组件的属性以及事件参考了ElementUI,Ant Design等等，主要也是为了降低开发者的学习成本；
  • 目前组件库的样式属于是比较差的一环了，主要是变量比较少，组件的样式也简单。等小编飞黄腾达了之后再专门花钱请UI重新设计一遍。—_—！
  • 目前还缺少多语言国际化的功能，这个属于体力活了，等后续有时间会补上；

最后附上相关的链接地址：

avatar
文章
阅读
粉丝