前言

🎅圣诞节来了,先祝掘金的用户圣诞节快乐!
我们的 iView 开源组件库也发布了圣诞版,快去更新日志页找彩蛋吧 iviewui.com
之前在掘金发布了多篇关于 iView 的技术文章后,在社区和 GitHub 得到了很多开发者的支持,我们也励志要将 iView 做成精品,并且计划在 2017 年初完成以下三项内容:

  • 支持 Vue 2.0(已经快被这个问题逼疯了)
  • 支持多语言
  • 增加英文文档

先说说写本文的初衷吧,最近几天正好在用 iView 开发一个公司的项目(其实是快速重构),3天就完成了UI和交互部分,快速的开发得力于 iView 丰富的基础组件支持。所以借此征文机会,分享一些作为开发者,在使用 iView 时的经验和技巧吧。

GitHub地址: https://github.com/iview/iview

一个项目能够快速开发的基础是什么?

下图是项目的局部截图:


可以看到有很多标准的基础组件,比如搜索、下拉菜单、按钮组、折叠面板、Tabs、日期选择(v0.9.11 新增)等等。这么多组件如果需要自己开发,少说也得半个月,在使用 iView 后,仅仅用了半天时间就完成了。
所以说,如果想快速开发一个项目,最基本的要求有哪些呢?

有一套完整的 CSS 布局基础和Grid(Layout)系统

页面布局往往是开发者最头疼的问题,如果 CSS 基础不好的话,更是很难折腾,更不用说响应式了。而 iView 虽然是组件库,但它也是网页开发的一整套解决方案。
写页面前,大家都有 reset.css 的习惯吧,iView 则是使用normalize.css v5.0.0作为格式化基础,所以只要导入 iView 的样式,就可以愉快的开始写代码了。同时,iView 也帮你初始化了字体、字号、颜色等等,文档也有用色的使用建议,一般按照规范来的话,做出来的页面都显得很整齐漂亮。
如果用过 Bootstrap 的同学,应该很熟悉它的栅格系统,因为它是网页布局最常用的,尤其是很多做后端开发的,在搞不清怎么多列布局、响应式布局时,Grid(Layout)系统都可以解决大部分布局问题。iView 使用的是 24栅格 系统,将一列最多分成了 24 份,可以任组合 column,只要总和不超过24就行,超过会自动折行。
栅格组件也是支持 flex 的,所以下面这些布局都可以轻松实现:



使用好栅格布局,你的项目骨架就建好了。

使用导航

大部分中后台项目的页面常用布局有这么几种:

  • 顶部 fixed 主导航 和 二级导航(如果有三级导航,可以下拉展开),如图:
  • 顶部导航 和 左侧导航 配合使用,如图:
  • 使用 侧边导航 作为主导航,如图:

    iView 的导航菜单组件 Menu 提供了横纵两种模式,以及 primary 、light、dark 三种主题,满足你不同的布局模式,而且使用起来很简单,UI 也很美观。

    巧用下拉菜单

    iView 提供了基础的下拉菜单组件,如图:

    为什么说巧用下拉菜单呢,是因为一开始开发该组件时,解决的需求就是图片中显示的这种普通下拉选择,而在实际项目中,它几乎能兼容所有的下拉需求,这点是我没有想到的,比如可以这样用:


内部是一个 slot,理论上可以容纳所以的 DOM 内容,利用好下拉组件,可以事半功倍。

表单类组件

表单组件是完成业务逻辑和交互的核心,比如 输入框、单选、多选、级联选择、开关、表格、select选择、日期选择等等。iView 基本能满足常用的表单类需求,有的还可以自己组合。
值得介绍的是 Table 表格组件,做后台离不开两种东西,Table 和 Chart。
iView 的 Table 在实现普通表格数据展示的基础上,额外提供了很多功能,比如固定表头、列,排序,过滤,还有市面上组件库都不支持的功能——导出 .csv 文件,可以导出原始数据、排序过滤后的数据,甚至自定义内容的数据,关键是支持包括IE9在内的所有浏览器,可以点此链接在线体验 https://www.iviewui.com/components/table#导出csv


其实组件用多了,开发项目就像是在拼积木一样。你不用去关心 UI 和功能,因为组件库都帮你实现好了,拿来即用。

总有一个适合你的 icon

发现好多项目中,不到万不得已,已经不想再用图片了,iconfont 已经成为了主流,矢量、方便,起到点缀页面的功能。iView 使用了开源项目 ionicons,提供了 700+ 常用的 icon,这么多图标,总有一个能满足你的需求吧。另外,在文档里也对 Icon 组件做了特殊优化,首先这么多图标,总不能每次都一个一个找吧,那要找到什么时候,所以提供了搜索功能,而且是支持语义搜索的,比如搜索关键词 success


跟 success 相关的图标都能识别出来,不局限于文件名,同时只要点击一下图标,就可以直接复制组件的代码了,是不是很方便。

结语

一个项目的进度,不是只靠加班就能完成的,聪明的产品经理和开发者会选择一套功能丰富的组件库作为公司标准来开发,大幅度减少造轮子的工作。文章最后,整理了一些开发 iView 项目中发现的其它优秀组件库,推荐给大家:


本文对你有帮助?欢迎扫码加入前端学习小组微信群: