iview 3.x 升级指南 —— Icon 篇
iview 在今年 7 月 28 号发布了 3.0.0 版本,大版本升级往往意味着功能、接口的大变更。
虽然官网已经有长长的更新日志,但看起来还是有些抽象了,
所以我决定做个新旧版本的比较,盘点新版本到底为我们带来了什么新特性。这是系列文章的第一篇,讲的是最简单的组件 —— Icon,希望能给大家带来帮助
先看结论
新版本 Icon 有如下变化点:
- 新版本的 Icon 组件支持更多图标类型
- 新旧版本的图标名有些差异,升级时务必注意
- Icon 组件支持自定义图标,可通过
custom
属性传递类名 - Button、Avatar、Rate 组件也支持自定义图标,可通过
custom-icon
属性传递类名
有时间的朋友,也欢迎看看下面的详细解读:
基础升级
新版 Icon 组件 最大的变化,是升级图标库 ionicons 到 3.x 版本,可用的图标类型从 730 增加至 866。奇怪的是,目前ionicons提供的版本已经是 4.2.5 iview 却只用了其 3.x 版本。
升级后的图标库,功能更强大了,但却为旧版本升级带来了一个坑:
具体是那些图标名称发生变化了呢?官网没有明说,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>
尴尬的是,目前仅有 Button
、Avatar
、Rate
三个组件支持 customIcon
属性,其他组件,诸如 Tab
、Input
、Alert
等尚不支持,官方也没有给出明确的计划,所以也不好揣测。
代码
新旧版本 Icon 组件代码差别不大,我将差异点抽出来:
<script>export default {props: {...custom: {type: String,default: ''}},computed: {classes () {return [`${prefixCls}`,{[`${prefixCls}-${this.type}`]: this.type !== '',[`${this.custom}`]: this.custom !== '',}];}...}};
</script>
可以看到,区别有两点,一是支持 custom
属性;二是基于 type
、custom
两个 props 计算 classes
值。Icon 组件很简单,这里只有一个小小建议: 对 type 值做个校验!
既然 type 属性只能传入 ionicons 支持的图标,为什么不做个 in 校验呢?为了性能?新版的 ionicons 有 866 图标,确实可能会影响一丢丢性能,但其实是可以在 process.env.NODE_ENV ==='development'
环境下做校验呀,多多少少也是可以挡住一些问题。
iview 3.x 升级指南 —— Icon 篇相关推荐
- coreelec 下载app_DY的瞎折腾系列 篇十三:N1多媒体系统CoreELEC升级指南
DY的瞎折腾系列 篇十三:N1多媒体系统CoreELEC升级指南 2019-04-15 18:31:07 70点赞 535收藏 292评论 感谢大家一直对N1系列的支持,由于CoreELEC刷入N1后 ...
- BetterTouchTool使用指南——TouchBar篇
BetterTouchTool使用指南--TouchBar篇 1.安装指南 1.1系统版本 博主更新了Big Sur Beta版,使用了一个月了,安装BetterTouchTool(以下简称BTT ...
- 2021 最新 Cloudera 大数据平台 CDP 升级指南白皮书完整版开放下载!(中文版)...
1 大数据平台 CDH/HDP 与 CDP 熟悉大数据业界的小伙伴们都知道,Cloudera 在跟 HortonWorks 合并后,便推出了新一代大数据平台 CDP,并正在逐步停止对原有的大数据平台 ...
- Spring Boot 3.0 正式发布,这份升级指南必须收藏
Spring Boot 3.0 现已正式发布,它包含了 12 个月以来 151 个开发者的 5700 多次代码提交.这是自 4.5 年前发布 2.0 以来,Spring Boot 的第一次重大修订. ...
- UI设计中Sketch使用指南—入门篇
对于UI设计师而言,Sketch充满了新鲜空气. 我想说:感谢sketch让Photoshop不再是UI设计师必备软件.这时候很多初学者的UI设计师对sketch充满了兴趣,甚至踊跃学习.下面胡老师给 ...
- RFS的web自动化验收测试——Selenium2Library升级指南(补充一个问题)
引言:什么是RFS--RobotFramework+Selenium2library,本系列主要介绍web自动化验收测试方面. ( @齐涛-道长 新浪微博) 我搞了个RobotFramework自动化 ...
- Kubernetes入门指南-基础篇
Kubernetes入门指南-基础篇 基础入门 kubernetes简介 kubernetes是一个平台 kubernetes架构 kubernetes不是什么 核心组件 kubernetes基本概念 ...
- PyTorch 0.4新版本 升级指南 no_grad
PyTorch 0.4新版本 升级指南 [导读]今天大家比较关心的是PyTorch在GitHub发布0.4.0版本,专知成员Huaiwen详细讲解了PyTorch新版本的变动信息, 本次升级, 只做了 ...
- java多线程编程_Java多线程编程实战指南+设计模式篇.pdf
Java多线程编程实战指南+设计模式篇.pdf 对Java架构技术感兴趣的工程师朋友们可以关注我,转发此文后私信我"Java"获取更多Java编程PDF资料(附送视频精讲) 关注我 ...
最新文章
- 赠书:分布式系统中的监控怎么做?
- 【转】揭开正则表达式的神秘面纱
- c语言#include后的尖括号和双引号有什么区别?
- 微信机器人开发SDK使用教程--删除朋友圈
- ios 初体验窗口的创建
- 这周我加星(8-11)
- matlab电压模块,matlab simpowersystems电路仿真模块.doc
- 怎么查看电脑最大支持扩展内存
- IOS移动应用跳转微信小程序
- iphone快捷指令蚂蚁森林能量_iPhone「快捷指令」怎么玩?玩法太多,别让这个功能吃灰...
- 安装infinity后主页始终显示百度页面?
- 饿了么交易系统设计思路
- 全自动过滤器:全自动叠片过滤器工作原理及应用范围
- 收敛域、收敛区间与收敛半径
- 开放api接口平台都会有appid、appkey、appsecret
- Windows环境下msysgit下安装gitflow步骤。
- Nose | 超轻的单元测试框架-精通
- 51单片机c语言工作手册,51单片机C语言编程手册
- 对finalize的理解
- 【oracle】无法通过 1024 (在表空间 USERS 中) 扩展 ORA-06512
热门文章
- iphone短信尚未送达_iPhone开启这个功能,从此告别垃圾短信骚扰!
- 大数据分布式工作流任务调度系统DolphinScheduler v1.3.4
- 大米API源码v2.0(全新UI版本)
- android app应用签名生成工具,android应用签名详细步骤
- B75经典门户商业版discuz模板
- Bootstrap 3 加半星 Star rating with half-stars
- 自适应网页设计(Responsive Web Design)响应式设计
- JS操作iframe里的dom
- 马拉车(manacher)算法——最长回文(hdu3068)
- C++读写表格csv——文本与表格完美桥接者