如何在Vue.JS中使用图标组件


Posted in Javascript onAugust 04, 2020

原文链接: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形态,它们有各自的优缺点:

1.使用单一的组件(如<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)

2.用一个单一的维护(如<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的缺点。

3.每个组件代表不同的图标(如<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)

以上就是如何在Vue.JS中使用图标组件的详细内容,更多关于Vue.JS中使用图标组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
js 数据类型判断的方法
Dec 03 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 #Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 #Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 #Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 #Javascript
VUE使用axios调用后台API接口的方法
Aug 03 #Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 #Javascript
js数组中去除重复值的几种方法
Aug 03 #Javascript
You might like
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
浅析php变量修饰符static的使用
2013/06/28 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
Python实现的密码强度检测器示例
2017/08/23 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python实现简单多人聊天室
2018/12/11 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
如何利用Python写个坦克大战
2020/11/18 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
如何保障Web服务器安全
2014/05/05 面试题
大学生入党自我鉴定
2013/10/31 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
幼儿园开学通知
2015/04/24 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android