文档章节

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

aresn
 aresn
发布于 03/12 10:20
字数 1739
阅读 488
收藏 3
点赞 0
评论 5

在过去的两个多月里,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

“看得见”的更新

所谓看得见的更新,就是更新后能真实感受到的东西。这两个版本都得感谢两位瑞典大神 SergioCrisostomoXotic750 的贡献,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 最新版本支持键盘可访问性的组件有: ButtonInputRadioCheckboxSwitchAutoCompleteSliderInputNumber。更多组件还在陆续支持中。

事实上,原生的表单控件,浏览器都是支持键盘的可访问性的,比如 <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

© 著作权归作者所有

共有 人打赏支持
aresn

aresn

粉丝 76
博文 9
码字总数 12243
作品 3
朝阳
加载中

评论(5)

ghostman
ghostman
Sorry for my poor english
f
freezingsky
我就喜欢这种心态。
dingdayu
dingdayu
good! 开源,开放,共赢!
geyingauv
geyingauv
刚入门vue 那个弹框的两条横线能不能去掉
局长
局长
so cool~~加油,支持 iView,为 Aresn 打电话 :thumbsup:
基于nuxt和iview搭建OM后台管理系统实践(4)-七牛上传组件的封装

目录结构 这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境 自行开发的公共组件,富文本quill[已完成]、地图、上...

愿爱无忧dk_ ⋅ 昨天 ⋅ 0

iView 发布微信小程序 UI 组件库 iView Weapp

末尾有彩蛋。 过去的两年里,iView 开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为 Vue.js 生态里重要的一部分。 与此同时,我们也在思考,除了服务 PC Web...

Aresn ⋅ 06/11 ⋅ 0

微信小程序 UI 组件库 - iView Weapp

iView Weapp —— 一套高质量的微信小程序 UI 组件库 iView Weapp 是什么? 微信小程序提供了自定义组件的功能,这使得 iView Weapp 成为了可能。小程序已经提供了很多组件和 API,但它们过于...

aresn ⋅ 06/11 ⋅ 0

微信组件 iView Weapp快速上手

概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下。 一 预览iView组件 可以在手机上扫码查...

码农界段子手 ⋅ 06/11 ⋅ 0

iview-admin IE兼容方案(已弃坑)

[iview admin][1] 是基于 [iview][2] 的一套后台管理系统,界面清爽,功能比较完整,很适合快速上手。不过它未兼容IE(非Edge)9/10,而本该可以部分支持的。这里提供一些解决方案。 一、con...

一点灵犀 ⋅ 01/24 ⋅ 5

vue2 + iview-admin 1.3 + django 2.0 一个最简单的增删改查例子

以下为利用iview-admin + django 做的一个最基本的增删改查例子。 前端iview-admin src/main.js src/router/router.js src/views/asset/ asset.vue asset-add.vue asset-info.vue asset-edit......

295631788 ⋅ 06/09 ⋅ 0

[实用] 配置 iview 调试环境

项目选用 iview 做 UI 组件库,前前后后用了也差不多一年了,不得不说,质量还是不错的,遇到的问题并不多。 但偶尔遇到的时候,掌握熟练的调试技巧还是很有必要的,这里做个总结,没什么高深...

VanMess ⋅ 06/14 ⋅ 0

iView 2.14.1 发布,基于 Vue.js 的企业级 UI 组件库

iView 2.14.1 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品。 更新内容如下: 修复 2.14.0 版本中,在 SSR 中无法使用的 bug。#3740 修复 2.14.0 版...

aresn ⋅ 06/01 ⋅ 0

iView 2.14.2 发布,基于 Vue.js 的企业级 UI 组件库

iView 2.14.2 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品。 更新内容如下: 修复 Select 在异步设置 Option 时,无法显示选中项的 bug。#3722 修...

aresn ⋅ 06/08 ⋅ 0

vue使用computed和watch监听实现表单控件的联动效果

vue: 直接使用iview的相关控件 1、template:提前安装iview,主要使用iview相关控件 2、data:主要定义需要用到的一些属性 3、computed :计算当前控件的值 4、watch : 监听报销金额和税率变化...

YJ_ ⋅ 05/31 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim基础-编辑模式-命令模式

编辑模式:可以编辑修改文件。编辑模式下 按“esc”键返回一般模式。 按一次“Insert”键 (一般在键盘回格键右边)作用和“i”一样表示“插入”。按两次“Insert”键表示“替换”,作用为:...

ZHENG-JY ⋅ 13分钟前 ⋅ 0

MaxCompute读取分析OSS非结构化数据的实践经验总结

摘要: 本文背景 很多行业的信息系统中,例如金融行业的信息系统,相当多的数据交互工作是通过传统的文本文件进行交互的。此外,很多系统的业务日志和系统日志由于各种原因并没有进入ELK之类...

阿里云云栖社区 ⋅ 18分钟前 ⋅ 0

Linux操作系统有何优势?Linux学习

  当今世界流行的操作系统有3大类,Linux、Mac OS和Windows操作系统,Linux操作系统因其开源、免费、跨平台、良好的界面等特性,深受广大程序员们的青睐!   Linux操作系统被广泛的应用于...

老男孩Linux培训 ⋅ 19分钟前 ⋅ 0

Spring Cloud Spring Boot mybatis分布式微服务云架构 开发Web应用

静态资源访问 在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static /pub...

itcloud ⋅ 23分钟前 ⋅ 0

6月19日任务 设置更改root密码、连接mysql、mysql常用命令

13.1 设置更改root密码 1. /usr/local/mysql/bin/mysql -uroot 设置环境变量 : export PATH=$PATH:/usr/local/mysql/bin/ 永久生效: vim /etc/profile 加入 export PATH=$PATH:/usr/local/m......

吕湘颖 ⋅ 25分钟前 ⋅ 0

MaxCompute读取分析OSS非结构化数据的实践经验总结

摘要: 本文背景 很多行业的信息系统中,例如金融行业的信息系统,相当多的数据交互工作是通过传统的文本文件进行交互的。此外,很多系统的业务日志和系统日志由于各种原因并没有进入ELK之类...

猫耳m ⋅ 26分钟前 ⋅ 0

Spring MVC controller,return重定向redirect:

@RequestMapping(value="/save",method=RequestMethod.POST)public String doSave(Course course) {log.debug("Info of Course");log.debug(ReflectionToStringBuilder.toStr......

颖伙虫 ⋅ 34分钟前 ⋅ 0

JavaSE——线程介绍

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 线程: 介绍:管线程叫多任务处理,首先你得知道...

凯哥学堂 ⋅ 37分钟前 ⋅ 0

ORM——使用spring jpa data实现逻辑删除

前言 在业务中是忌讳物理删除数据的,数据的这个对于一个IT公司可以说是最核心的资产,如果删除直接就物理删除,无疑是对核心资产的不重视,可能扯的比较远,本文最主要是想通过spring jpa ...

alexzhu592 ⋅ 44分钟前 ⋅ 0

CDN caching

Incapsula应用感知CDN使用智能分析和频率分析来动态缓存内容,并最大限度地提高效率。确保可直接从RAM获取最常访问的资源,而不依赖于较慢的访问机制。 1、 静态内容缓存 Incapsula缓存静态内...

上树的熊 ⋅ 47分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部