iView 近期的更新，以及那些“不为人知”的故事

[Aresn]

在过去的两个多月里，**iView** 陆续发布了 2.9.0 和 2.10.0 两个重要版本。这两个版本总共有 255 个 commit，超过 40 项更新。来看一下，iView 具体都更新了些什么。

完整的更新日志可以到 GitHub releases 查看: 2.9.0: https://github.com/iview/iview/releases/tag/v2.9.0 2.10.0: https://github.com/iview/iview/releases/tag/v2.10.0

或者在 iView 文档的更新日志查看： https://www.iviewui.com/docs/guide/update

说明：由于 2.10.0 存在编译后文件过大的问题，请更新至 2.10.1

“看得见”的更新

所谓看得见的更新，就是更新后能真实感受到的东西。这两个版本都得感谢两位瑞典大神 SergioCrisostomo 和 Xotic750 的贡献，iView 才得以越来越完善。

日期组件 DatePicker 的重构

首先是在 2.10.0 对日期组件 DatePicker 的重构。DatePicker 是 iView 48 个组件里最复杂的组件之一。复杂的功能使得代码逻辑非常重，在许多新特性的支持上，比如兼容不同国家的日历规范等都很难在此基础上迭代，不得不推倒重来。

SergioCrisostomo 之前有开发过日期相关的 JS 库（https://github.com/SergioCrisostomo/js-calendar），所以对日期相关的功能点和 API 非常熟，iView 也是基于此库进行的重构。

新的日期组件主要增加了以下功能：

1.范围选择支持从右往左选择了。 之前在范围选择时，必须先选起点，再选终点，也就是从左往右选，但很多用户的习惯却刚好相反。该版本则同时支持两个方向的选择。

2.新增 split-panels 属性，开启后，左右两面板可以不联动。 之前在范围选择时，左右两个面板是联动的，也就是右边永远比左边大一个月，任何一个面板切换月份或年份，另一个面板都会自动切换。该版本则可以设置为不联动，这样方便定位起始月份和结束月份。如图所示：

3.新增 multiple 属性，开启后，可以选择多个日期。 虽然之前版本可以用其它 iView 组件组合出来一个多选的日期，但效果和交互多少会打折扣，该版本只要增加属性 multiple，就可以在一个日期面板上同时选择和呈现多个日期了。如图所示：

4.新增属性 show-week-numbers，开启后，可以显示星期数。 增加这个属性，就可以在日历面板上显示当前是一年的第几周。如图所示：

还有其它很多项的更新，比如新增 start-date 属性，可以设置面板展开时默认显示的日期。新增属性 time-picker-options，可以在 type 为 datetime 和 datetimerange 下，配置 TimePicker 的属性，比如时间间隔 steps。完整的更新可以产看更新日志，这里不一一列举了。

键盘可访问性的支持

键盘的可访问性，主要是通过键盘的方向键、tab 键、空格键等完成表单组件的切换和交互。在填写一个表单时（ iView Form 组件），尤其有用，你可以离开鼠标，就完成一个复杂表单的填写与提交。

目前 iView 最新版本支持键盘可访问性的组件有： Button、Input、Radio、Checkbox、Switch、AutoComplete、Slider、InputNumber。更多组件还在陆续支持中。

事实上，原生的表单控件，浏览器都是支持键盘的可访问性的，比如 <button>、<input type="radio"> 等等。iView 对这些原生控件进行了重塑，不仅仅使得 UI 好看和统一，更重要的是功能的丰富和交互体验的提升。

目前上述的组件，都是可以通过键盘的 tab 键 选中的，这是第一步，如图所示：

可以看到，组件在被选中时，外面多了一个高亮层，表明当前选中的控件，这时就可以通过键盘其它按键继续操作了，比如单选组件 Radio，在选中状态下，可以通过键盘的方向键直接切换选项；Checkbox 在被激活时，可以通过空格键选择和取消选择某小项，通过 tab 键激活下一个小项。

“看不见”的更新

还有一些更新，是无法直接看见和体会到的。

比如更新了大量的依赖：

• babel 系列全部更新
• 使用了 browserslist

使用了 sourcemap。

部分组件的重构，虽然功能无任何变化，但代码结构和逻辑都做了优化和可维护性设计。

还有部分组件的自动化测试、持续集成对 GitHub travis-ci 的兼容等等。

外表需要优化，内部同样也是，就像一个人，既要有外在美，也要有内在美。

“不为人知”的故事

在开源工作中，发生过许多有趣的事，这里分享几个有意思的。

在瑞典，想用开源项目，得先改 bug

在瑞典使用开源项目到生产环境时，开发者有义务来修复开源项目的 bug。这一刻，觉得瑞典好好啊。

“吵”不过老外

Sorry for my poor english. 已经成为一个段子了，然后不得不用 english。但是老外一句 Sorry for my poor Chinese 就会让你无话可说。所以，英语不好的我，有时候就“吵”不过老外们了。

当我还在查 “ optimisation ” 是啥意思的时候，对方已经 balabala 说一堆了，吵不过就妥协吧。

就像你跟仰慕的女神聊天，你 bibibi 说了一大堆，对方半天回你一句 “哦” 一样，哈哈。

不过，妥协归妥协，讲的还是有道理的，不能为了妥协而妥协，真理才是最重要的。

讲这些，更多想说的是，iView 的每个功能点，都是我们精心揣摩探讨出来的，不会凭借主观意识去做，也不会因为任何一个 Feature Request 就去支持，每个 feature 都是讨论出的结果。所以，这是一个既有情怀，又负责的开源项目。

目前的 iView 核心团队有 3 人在同时维护，相比以前独立奋斗的我要好的多了，但仍然需要更多像瑞典开发者这样有开源精神的工程师们加入，致力把 iView 打造成全球最好用、最好看的 UI 组件库。期待你的加入！

下个版本预告：下个版本计划重构 Select 组件，以全面支持表单组件的键盘可访问性，敬请期待。完整的计划见里程碑 https://github.com/iview/iview/milestone/9

[HuHui]

加油

[469054193]

难得看到自己熟悉的帖子 感谢楼主... 一直在用 iview 很棒

[forzalianjunting]

感谢 iview，不过目前我们团队使用中发现的一些 bug 和急需的一些功能：

1、select 组件不会自动选择是向上还是向下展开，有可能会被挡住；
2、select 组件的 option 为空时，会出现一个很矮的空白下拉；
3、table 的 column 急需一个 min-width 属性。

以上问题我们都进行了一些组件重写来临时解决，但还是希望能用到官方的。

[yoqu]

加油，支持开源作者，辛苦了

[naiba]

给 IView 投币，在用

[xiaoxiuaoliang]

感谢作者。昨天项目由于从 2.9 升至 2.10 ，时间选择器闹出个故障，好一阵忙活…… 以后得仔细看更新日志了

[pepesii]

感谢作者，用过 iview

[yag]

感谢作者

[scys]

感谢作者，虽然不用 iView.

[xiaoxiuaoliang]

@Aresn
2.9.2 到 2.10.1 后，TimePicker 绑定的 v-model，值从日期对象变为了字符串
<TimePicker
format="HH:mm"
v-model="time">

如上, time 从 Mon Mar 12 2018 11:26:59 GMT+0800 (CST)变为了类似"19:12"
这点没在更新日志中体现出来。

[zj0713001]

好棒好棒

[w88975]

风格有点像 antd

[wwdyy]

非常喜欢 iview

[kaifazhe]

觉得 iview 的 ui 是同类中最好的

[zhlssg]

@w88975 #12 ant design 的 vue 实现

[123qqqqqq]

感谢 @Aresn , 从去年开始就一直用 iView，谢谢你们的工作

[wwek]

加油非常棒