Vue3开源组件库:plain-ui

·  阅读 5614
Vue3开源组件库:plain-ui

概览

大家好,我是peryl,今天给大家带来个人开源的Vue3.0组件库:plain-ui;废话不多说,直接上才艺;

theme01.png

theme_02.png

theme_03.png

theme_04.png

theme_05.png

theme_06.png

特性

  • 支持在vue-clivite等项目中直接安装使用,支持静态构建(在一个静态的HTML文件中引入几个js,css文件即可使用)以及组件按需引入;
  • 当按需引入组件,或者基于源码构建(配置别名plain-ui指向node_modules/plain-ui/src/index)的时候,可以实现图标按需加载;
  • 文档支持在线调试,极速打开,无需翻墙。所见即所得,文档中的所有示例都是基于其调试的代码生成,不会出现示例与调试源码不一致的情况;
  • 所有组件都是使用CompositionApi + Typescript + JSX实现,不含有隐式的any类型,如果有同学使用Vue开发对其中任何一个技能深入用法感兴趣,那么plain-ui的组件是绝佳的学习对象;
  • 轻量,gzip压缩之后只有不到200k,css在gzip压缩之后只有50kb;
  • 强大的日期组件,支持年、年月、年月日、年月日时间、周、季度六种视图,并且每种视图都支持单选、范围选择以及限制最大最小时间、除了年月日时间视图之外,其他视图都支持多选。
  • 强大的树组件,支持单选、多选、懒加载、虚拟滚动以及拖拽,并且自带有滚动条样式优化;
  • 强大的基础表格组件:支持分组表头、固定头和列、作用域插槽自定义内容、展开列、树形表格(拥有树组件的所有特性)、行拖拽排序、列拖拽排序、合并行和列、虚拟滚动、行内编辑以及表单校验等功能,并且自带有滚动条样式优化;

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

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

其他

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

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

分类:
前端
标签:
分类:
前端
标签: