Vue3开源组件库：plain

您所在的位置：网站首页 › plain是什么意思 › Vue3开源组件库：plain

Vue3开源组件库：plain

2023-09-23 03:25| 来源: 网络整理| 查看: 265

概览

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

文档地址：plain-pot.gitee.io/plain-ui-do… 组件概览：plain-pot.gitee.io/plain-ui-do…

特性支持在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重新设计一遍。—_—！目前还缺少多语言国际化的功能，这个属于体力活了，等后续有时间会补上；

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

plain-ui-composition文档地址; 给defineComponent附魔：讲解plain-ui-composition中designComponent与defineComponent区别的一篇掘金文章； plain-ui组件库视频讲解； plain-design-pro:视频讲解中中演示TablePro的在线地址，账号密码admin/888888，这个目前属于一个半完成品把，核心是一个自研的微前端框架以及微前端路由； plain-design-composition文档：在React中使用VueCompositionApi； plain-design文档地址：plain-ui的React版本，源码相似度99%；来了！VueCompositionApi For React！：小编研发的一套在React中下使用VueCompositionApi库！来试试这款VueCompositionApi开发的React组件库——plain-design

【本文地址】

Vue3开源组件库：plain

Vue3开源组件库：plain

今日新闻

推荐新闻