资讯专栏INFORMATION COLUMN

支持多框架的组件库KPC 1.0正式发布

刘厚水 / 1453人阅读

摘要:自从年月份对外公布以来,已经经过了个月的迭代,期间发布了几十个正式版本,但一直没有到,因为我们觉得是个里程碑版本,我们必须做的足够完善才敢称之为。

自从17年11月份对外公布以来,KPC已经经过了8个月的迭代,期间发布了几十个正式版本,但一直没有到1.0,因为我们觉得1.0是个里程碑版本,我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布:KPC 1.0终于来了!

其实距离0.0.1的发布,到现在已经1年多了,但是KPC并没有收货太多的关注,伴随着一个接一个的小版本迭代,github上星星的数量也不紧不慢地突破100大关。但我们并没有放弃对KPC的细心呵护,每一次star,每一个issue,都使我们备受鼓舞,促使我们打磨每一个细节,力争做出自己的特色,做到精益求精。

关注KPC的用户应该注意到了,KPC已经两个月没有发版了,是的,因为我们这段时间一直在专注1.0的开发,下面便说说这两个月的工作成果吧。

新增4个常用组件 走马灯(轮播图)组件Carousel

除了支持最基本的走马灯效果外,Carousel还支持同时展示多个内容块

基于Monaco Editor的代码编辑器组件Code

Monaco Editor是VSCode的web版,功能非常强大

图钉组件Affix

图钉组件,用于在滚动页面时,固定一些内容

卡片组件Card

除了常用的卡片外,还支持分栏卡片

新增大量特性

除了上述新增的组件外,对现有组件的功能也进行了大量优化和改进。

表格组件Table支持表头分组,合并单元格,保存列宽信息等功能

弹窗组件Dialog支持静态方法定义带标题的样式

时间选择组件Timepicker支持步长设置时不展示秒钟

提示弹层组件Tooltip,新增深色主题dark,并且默认为深色


(级联)选择框组件Cascader/Select新增无数据提示

新增Vue/React编译包,减少配置项

之前需要配置webpack alias才能是KPC在Vue/React下使用,现在不需要,直接引用相应的组件即可,例如:

Vue: import Button from "kpc/@vue/@css/components/button";
React: import Button from "kpc/@react/@css/components/button";

当然你也可以设置alias来简化引用路径

细节打磨

1.0中我们使用展示/隐藏(show/hide)动画来替代之前的创建/删除(create/remove)动画,同时打磨动画的细节,使动画更自然流畅。

例如:之前的版本中,如果快速点击,使一个展开的元素在收起和展开之间切换,则收起动画会立即跳至最终状态,然后再展开,这样会显得动画很突兀


而1.0中,对于上述情况,它不会跳至最终状态,而是从收起的中间状态回到展开状态,使动画更自然

文档

1.0中对部分文档进行了补充,使之更易上手。同时对文档中的示例代码,可以在CodeSandbox中打开进行预览和调试

Vue示例:
React示例:

结语

没有什么东西是完美的,但应该保持追求完美的赤子之心。同样,1.0也并非完美,还有大量工作亟待完成,它只是漫漫长征路上的第一个落脚点而已,至此,再出发,开启新的篇章...

KPC文档 github

更新日志

新增组件

Add 新增图钉组件Affix,用于滚动页面固定某些内容 #300

Add 新增走马灯(轮播图)组件Carousel #299

Add 新增代码编辑器组件Code,基于Monaco Editor(VSCode)封装而来 #288

Add 新增卡片组件Card #241

新增特性

Add 新增全局配置方法configure,使用configure({useWrapper: true})可以开启Dropdown/Tooltip兼容模式 #291

Add Tree如果初始化数据中包含children,当异步加载时,不会再次调用loadData函数去加载数据 #290

Add Table支持保存调整列宽后的列宽信息 #292

Add Table新增表头分组功能 #265

Add Table新增合并单元格功能 #265

Add Upload支持文件类型强检测,不合法是抛出error事件,因为浏览器accept属性仅仅只是建议类型,并不能限制类型 #271

Add Progress新增warning状态 #301

Add Tree支持父子Checkbox非关联模式,该模式下父子的选中状态多带带控制,互不影响 #302

Add FormItem新增fluid属性,展示100%宽度的表单项 #303

Add 新增Vue/React编译包,减少webpack alias配置项 #308

Add Button组件新增secondarylink类型 #320

Add Dialog支持点击遮罩层关闭弹窗 #324

Add Dialog静态方法支持展示带标题title的弹窗 #324

Add SelectCascader在无内容时,展示“无内容”的提示层 #321

Add DatepickerTimepicker新增“确定”按钮,以方便用户关闭弹层 #322

Add Timepicker支持设置step时,隐藏“分钟”或/和“秒钟”的展示 #323

Add Tooltip新增主题支持,默认展示为dark主题 #326

Add Transfer新增list header扩展点,以及左右箭头按钮的控制,使之可以更灵活地定义穿梭框逻辑 #314

AddTable fixHeader设为true时,表格高度自动设为100%,然后根据父容器高度确定表格体的高度来展示滚动条 #310

组件优化

Refactor 优化Table hover以及滚动的性能 #310

Refactor 优化Slider滚动条热区,更容易点击 #307

Refactor 优化弹出元素动画,使用show/hide动画替代create/remove动画,使动画更流畅 #278

Bug修复

Fix 修复错误地引入babel-types导致可能不存在该模块而编译报错的问题 #283

Fix 修复Pagination当页码过长时溢出的问题 #286

Fix 修复Timepicker范围选择时,首次弹出如果先选择结束时间,时间取值不对的问题 #289

Fix 修复Table调整列宽后,如果表格容器宽度变大,会出现表格宽度小于容器宽度的情况 #293

Fix 修复SliderSpinner输入框时,在设置了step的情况下,输入的过程中也会修正值,导致无法输入想要的值的问题 #294

Fix 修复webpack配置可能禁用了require.ensure(如:新版Create React App)导致有些异步加载的模块报错的问题 #304

Fix 修复Switch点击滑块,由于click事件被stopPropagation而在外部监听不到click事件的问题 #309

Fix 修复Table当表格高度固定时,data改变导致出现滚动条,固定表头和表格体没对齐的问题 #310

Fix 修复默认主题下Message icon颜色丢失的问题 #317

破坏性变更

Change Drawer由之前的点击抽屉外任何区域关闭抽屉,改为点击遮罩层才关闭

Change Datepicker在选择时间时,去掉无用的年月展示信息

Change 使用es6 module进行构建,例如代码编译优化 #297

文档

Add 支持Vue/React示例代码,在CodeSandbox中打开 #267

Vue/React开始文档补充CDN用法

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105720.html

相关文章

  • iView 一周年了,同时发布了 2.0 正式版,但这只是开始...

    摘要:在许多志愿者的帮助下,将文档全部翻译为英文,在开发者社区颇受欢迎。有了英文版后,更多的国外开发者也参与到讨论之中,相信接下来会有更多来自国外的。英文版的翻译离不开社区的贡献,在此特别感谢和三位热心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 两年前,我开始接触 Vue.js 框架,当时就被它的轻量、组件...

    alexnevsky 评论0 收藏0
  • iView 一周年了,同时发布了 2.0 正式版,但这只是开始...

    摘要:在许多志愿者的帮助下,将文档全部翻译为英文,在开发者社区颇受欢迎。有了英文版后,更多的国外开发者也参与到讨论之中,相信接下来会有更多来自国外的。英文版的翻译离不开社区的贡献,在此特别感谢和三位热心志愿者。 showImg(https://segmentfault.com/img/bVRG13?w=2880&h=1800); 两年前,我开始接触 Vue.js 框架,当时就被它的轻量、组件...

    Drinkey 评论0 收藏0
  • iView 发布 1.0 正式版,43 个 UI 组件助力中后台业务开发

    摘要:时隔半年多,终于迎来了它的第一个正式版本,到目前版本,已经有个常用组件,从功能和设计上,是最接近的实现。主要服务于中后台业务,目的就是让网站快速成型上线。 时隔半年多,iView 终于迎来了它的第一个正式版本 1.0.0,到目前版本,已经有 43 个常用 UI 组件,从功能和设计上,是最接近 Ant.Design 的 Vue.js 实现。 关于 iView 1.0 GitHub 地址...

    voidking 评论0 收藏0
  • Vant 1.0 发布:轻量、可靠移动端 Vue 组件

    摘要:是有赞前端团队维护的移动端组件库,提供了一整套基础组件和业务组件。一关于距离首次发布刚好过去了半年时间,在这半年时间里团队广泛吸纳社区的反馈和建议,持续对组件进行打磨优化,使得逐渐成长为一个轻量可靠的移动端组件库。 Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面,提升开发效率。 showImg(...

    Prasanta 评论0 收藏0

发表评论

0条评论

刘厚水

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<