Vue3开源组件库：plain-ui

peryl
9,333 阅读4分钟

概览

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

theme01.png

theme_02.png

theme_03.png

theme_04.png

theme_05.png

theme_06.png

特性

  • 支持在vue-cli，vite等项目中直接安装使用，支持静态构建（在一个静态的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重新设计一遍。—_—！
  • 目前还缺少多语言国际化的功能，这个属于体力活了，等后续有时间会补上；

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

avatar
文章
阅读
粉丝