iview 3.x 升级指南 —— Icon 篇

iview 在今年 7 月 28 号发布了 3.0.0 版本,大版本升级往往意味着功能、接口的大变更。
虽然官网已经有长长的更新日志,但看起来还是有些抽象了,
所以我决定做个新旧版本的比较,盘点新版本到底为我们带来了什么新特性。

这是系列文章的第一篇,讲的是最简单的组件 —— Icon,希望能给大家带来帮助

先看结论

新版本 Icon 有如下变化点:

  1. 新版本的 Icon 组件支持更多图标类型
  2. 新旧版本的图标名有些差异,升级时务必注意
  3. Icon 组件支持自定义图标,可通过 custom 属性传递类名
  4. Button、Avatar、Rate 组件也支持自定义图标,可通过 custom-icon 属性传递类名

有时间的朋友,也欢迎看看下面的详细解读:

基础升级

新版 Icon 组件 最大的变化,是升级图标库 ionicons 到 3.x 版本,可用的图标类型从 730 增加至 866。奇怪的是,目前ionicons提供的版本已经是 4.2.5 iview 却只用了其 3.x 版本。

升级后的图标库,功能更强大了,但却为旧版本升级带来了一个坑:

官网alert

具体是那些图标名称发生变化了呢?官网没有明说,ionicons也没有明说,找来找去也没找着可信的说明,建议大家在升级的时候仔细测试所有 Icon 调用。

支持自定义图标

除了ionicons库的变化之外,新版 Icon 还支持 通过 custom 传入图标 class 名,实现自定义图标功能,举个例子:

<Icon custom="fa fa-user" />
<!-- 等同于: -->
<i class="ivu-icon fa fa-user">

这真是一个很方便的功能,因为 iview 提供的图标是不可能覆盖所有应用场景的,实际开发中一般都会自行引入其他图标库,在旧版本中引入的图标库与 iview 之间是割裂的,没法复用 icon 的行为逻辑,比如 Button 中图标的 loading 效果。
在新版本中终于可以大胆使用自定义图标了,比如 下面的例子,我在 Button 组件中使用 font-awesome 的 fa-user 图标,但在 loading 态中,还是会保留原来的转菊花效果。

<div id="app">
  <i-button custom-icon="fa fa-user">Custom icon</i-button>
  <i-button custom-icon="fa fa-user" :loading="true">
    Loading effect
  </i-button>
</div>

尴尬的是,目前仅有 ButtonAvatarRate 三个组件支持 customIcon 属性,其他组件,诸如 TabInputAlert 等尚不支持,官方也没有给出明确的计划,所以也不好揣测。

代码

新旧版本 Icon 组件代码差别不大,我将差异点抽出来:

<script>
    export default {
        props: {
            ...
            custom: {
                type: String,
                default: ''
            }
        },
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-${this.type}`]: this.type !== '',
                        [`${this.custom}`]: this.custom !== '',
                    }
                ];
            }
            ...
        }
    };
</script>

可以看到,区别有两点,一是支持 custom 属性;二是基于 typecustom 两个 props 计算 classes 值。Icon 组件很简单,这里只有一个小小建议: 对 type 值做个校验
既然 type 属性只能传入 ionicons 支持的图标,为什么不做个 in 校验呢?为了性能?新版的 ionicons 有 866 图标,确实可能会影响一丢丢性能,但其实是可以在 process.env.NODE_ENV ==='development' 环境下做校验呀,多多少少也是可以挡住一些问题。


1.4k 声望
6.8k 粉丝
0 条评论
推荐阅读
🦀🦀🦀 一个普通人的前端职业成长之路
大家好,我是 范文杰,一个前端从业者,最近刚写完我的第一本小册《Webpack 核心原理与实践应用》,这对我是一个不小的职业突破,所以不能免俗地想做个总结,分享我这九年工作的成长经历,以及我对前端这个职业的...

范文杰3阅读 1.1k

封面图
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.2k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.6k评论 7

前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

万字长文~vue+express+mysql带你彻底搞懂项目中的权限控制(附所有源码)
所谓的权限,其实指的就是:用户是否能看到,以及是否允许其对数据进行增删改查的操作,因为现在开发项目的主流方式是前后端分离,所以整个项目的权限是后端权限控制搭配前端权限控制共同实现的

水冗水孚11阅读 1.5k

[译]Vue.js + Astro 比 Vue SPA 更好吗?
在本文中,我将向您展示如何使用 Astro 构建基于 Vue 的应用程序,我们将了解其独特的架构如何带来比单页应用程序 (SPA) 更好的性能。

杭州程序员张张7阅读 4.1k评论 3

1.4k 声望
6.8k 粉丝
宣传栏