在Vue.JS中使用图标组件
原文链接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30
本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读。
此文不包含字体图标和SVG sprite。仅在此讨论允许用户按需导入的图标系统。
There are three major ways of exposing API of an icon component in Vue.js and each one of them has its own pros & cons:
在Vue.js的生态里,有3种主流的API形态,它们有各自的优缺点:
-
使用单一的组件(如
<v-icon>
),让乃通过name
或者type
属性来指定真正的图标。图标的数据通过一个全局的“池子”来注册。
// v-icon/flag.js import Icon from 'v-icon' import { mdiFlag } from '@mdi/js' Icon.add('flag', mdiFlag)
然后这样子使用:
<template> <v-icon name="flag" /> </template> <script> import VIcon from 'v-icon' import 'v-icon/flag' export default { components: { VIcon } } </script>
在我维护的VueAwesome(内置了FontAwesome图标的组件库)中用了这个方案,同时我认为这是当前最符合人机工程学的形式。不过图标的
name
属性和那些纯副作用的模块的导入之间的关系比较隐式,图标的数据也在全局注册。如果你有多个不同版本的v-icon
,就可能出现问题。FontAwesome官方的Vue.js组件用了一个稍微不同的方案,它们让用户自己主动把图标加到全局的池子中(也可能我不应该把这个方式归类到这个方案中):
import { library } from '@fortawesome/fontawesome-svg-core' import { faUserSecret } from '@fortawesome/free-solid-svg-icons' library.add(faUserSecret)
-
用一个单一的维护(如
<v-icon
),用户通过data
或content
之类的属性创建真正的图标。用户主动把图标的数据传递给组件:
<template> <v-icon :content="mdiFlag" /> </template> <script> import VIcon from 'v-icon' import { mdiFlag } from '@mdi/js' export default { components: { VIcon }, created() { Object.assign(this, { mdiFlag }) } } </script>
这是Vuetify支持的方式(Vuetify通过这种方式支持多种图标的使用方式),这种试在人机工程和直观性上有些损失,但没有方案1的缺点。
-
每个组件代表不同的图标(如
<icon-flag />
、<icon-star />
等)。这个方案里,每个组件通过一个图标工厂创造出来:
// icon-flag.js import { mdiFlag } from '@mdi/js' import { createIcon } from 'v-icon' export default createIcon('flag', mdiFlag)
并通过这种方式使用:
<template> <icon-flag /> </template> <script> import { IconFlag } from 'v-icon' export default { components: { VIcon, IconFlag } } </script>
这种方案在React社区里被广泛采用,我在本文的后续部分将展开讨论。
每个组件代表一个图标
我将更深入地说一下这种方案在Vue.js中的使用。
在Vue.js中,模板和脚本是分开的,组件通过components
选项注册。不过就像我们知道的,如果一个组件要用很多图标的话,这种方式会挺麻烦。
Vue 2
<template> <div> <!-- inline --> <icon-flag /> <!-- conditional --> <icon-flag v-if="flag" /> <icon-star v-else /> <!-- dynamic --> <component :is="flag ? IconFlag : IconStar" /> </div> </template> <script> import { IconFlag, IconStar } from 'foo-icons' export default { components: { IconFlag, IconStar }, data() { return { flag: true } }, created() { Object.assign(this, { IconFlag, IconStar }) } } </script>
可以看到如果想用图标的is
绑定,我们必须把components
手动暴露到渲染上下文中。我们可以用字符串去替换组件定义来绕过,但对代码检查和类型系统来说就不那么友好。
<template> <div> <!-- inline --> <icon-flag /> <!-- conditional --> <icon-flag v-if="flag" /> <icon-star v-else /> <!-- dynamic --> <component :is="flag ? 'icon-flag' : 'icon-star'" /> </div> </template> <script> import { IconFlag, IconStar } from 'foo-icons' export default { components: { IconFlag, IconStar }, data() { return { flag: true } } } </script>
Vue 3
<template> <!-- inline --> <icon-flag /> <!-- conditional --> <icon-flag v-if="flag" /> <icon-star v-else /> <!-- dynamic --> <component :is="flag ? IconFlag : IconStar" /> </template> <script> import { ref } from 'vue' import { IconFlag, IconStar } from 'foo-icons' export default { components: { IconFlag, IconStar }, setup() { const flag = ref(true) return { flag, IconFlag, IconStar } } } </script>
如果用:is
绑定,<script>
部分会变成这样:
import { ref } from 'vue' import { IconFlag, IconStar } from 'foo-icons' export default { components: { IconFlag, IconStar }, setup() { const flag = ref(true) return { flag } } }
如果我们采纳<script components>
这样的形式的话:
<template> <!-- inline --> <icon-flag /> <!-- conditional --> <icon-flag v-if="flag" /> <icon-star v-else /> <!-- dynamic --> <component :is="flag ? 'icon-flag' : 'icon-star'" /> </template> <script components> export { IconFlag, IconStar } from 'foo-icons' </script> <script> import { ref } from 'vue' export default { setup() { const flag = ref(true) return { flag } } } </script>
或者用<script setup>
提案:
<script setup> import { ref } from 'vue' export const flag = ref(true) </script>
后记
这很篇文章很精练地介绍了在Vue中按需引入图标的方式,与React社区做比较,可以看到两个生态的差异还是存在的。在React社区中,使用第3种方式(每个图标一个组件)非常普遍,如NPM上排名较高的react-icons和知名组件库@ant-design/icons、@material-ui/icons都是这一形态。
这可能是由于React社区中并不倾向将“组件”这一概念特殊化,组件就是普通的函数、普通的类,所以它的复用于其它的函数、类的复用相同,如同lodash
会导出很多个工具函数一样,一个图标库会导出很多个图标组件非常合理。
在文中对于使用createIcon
工厂函数的使用有一些可以优化的点。正常使用工厂函数会让创建的组件不可被tree shaking,其原因是语法分析会认为createIcon
函数本身是有副作用的,因此这个调用不能被安全地删除。可以通过terser的特殊注释来标记:
// icon-flag.js import { mdiFlag } from '@mdi/js' import { createIcon } from 'v-icon' export default /*#__PURE__*/createIcon('flag', mdiFlag)
作者:张立理 百度资深前端工程师
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
数据结构:“答应我,别再逃避我了好吗?”
本文我们来介绍一下编程中常见的一些数据结构。 为什么要学习数据结构? 随着业务场景越来越复杂,系统并发量越来也高,要处理的数据越来越多,特别是大型互联网的高并发、高性能、高可用系统,对技术要求越来越高,我们引入各种中间件,这些中间件底层涉及到的各种数据结构和算法,是其核心技术之一。如: ElasticSearch中用于压缩倒排索引内存存储空间的FST,用于查询条件合并的SkipList,用于提高范围查找效率的BKDTree; 各种分库分表技术的核心:hash算法; Dubbo或者Nginx等的负载均衡算法; MySQL索引中的B树、B+树等; Redis使用跳跃表作为有序集合键的底层实现之一; Zookeeper的节点树; J.U.C并发包的各种实现的阻塞队列,AQS底层实现涉及到的链式等待队列; JDK对HashMap的Hash冲突引入的优化数据结构红黑树… 可以发现,数据结构和算法真的是无处不在,作为一个热爱技术,拒绝粘贴复制的互联网工程师,怎么能不掌握这些核心技术呢? 与此同时,如果你有耐心听8个小时通俗易懂的数据结构入门课,我强烈建议你看一下以下这个视频,来自一位热衷于分享的G...
- 下一篇
Linux 是如何管理内存的?
点击蓝色“Java建设者”关注我哟 加个“星标”,及时阅读最新技术文章 这是Java建设者第 106 篇原创文章 Linux 内存管理模型非常直接明了,因为 Linux 的这种机制使其具有可移植性并且能够在内存管理单元相差不大的机器下实现 Linux,下面我们就来认识一下 Linux 内存管理是如何实现的。 基本概念 每个 Linux 进程都会有地址空间,这些地址空间由三个段区域组成:text 段、data 段、stack 段。下面是进程地址空间的示例。 数据段(data segment) 包含了程序的变量、字符串、数组和其他数据的存储。数据段分为两部分,已经初始化的数据和尚未初始化的数据。其中尚未初始化的数据就是我们说的 BSS。数据段部分的初始化需要编译就期确定的常量以及程序启动就需要一个初始值的变量。所有 BSS 部分中的变量在加载后被初始化为 0 。 和 代码段(Text segment) 不一样,data segment 数据段可以改变。程序总是修改它的变量。而且,许多程序需要在执行时动态分配空间。Linux 允许数据段随着内存的分配和回收从而增大或者减小。为了分配内存,程序...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果