在Vue.JS中使用图标组件的方法

这篇文章主要讲解了在Vue。JS中使用图标组件的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

此文不包含字体图标和SVG雪碧。仅在此讨论允许用户按需导入的图标系统。

的方法有三个主要组件在Vue暴露API的一个图标。js和每个>//v-icon/flag.js 　　从& # 39;进口图标v-icon& # 39; 　　进口{mdiFlag} & # 39; @mdi/js # 39; 　　Icon.add(& # 39;国旗# 39;,mdiFlag)

然后这样子使用:

 & lt; template>
　　& lt; v-icon name=癴lag"/比;
　　& lt;/template>
　　
　　& lt; script>
　　从& # 39;进口VIcon v-icon& # 39;
　　进口& # 39;v-icon/国旗# 39;
　　
　　出口默认{
　　组件:{
　　VIcon
　　}
　　}
　　& lt;/script> 

在我维护的VueAwesome(内置了FontAwesome图标的组件库)中用了这个方案,同时我认为这是当前最符合人机工程学的形式,不过图标的名字属性和那些纯副作用的模块的导入之间的关系比较隐式,图标的数据也在全局注册。如果你有多个不同版本的v-icon,就可能出现问题。

FontAwesome官方的Vue。js组件用了一个稍微不同的方案,它们让用户自己主动把图标加到全局的池子中(也可能我不应该把这个方式归类到这个方案中):

进口{图书馆}& # 39;@fortawesome/fontawesome-svg-core& # 39;
　　进口{faUserSecret} & # 39; @fortawesome/free-solid-svg-icons& # 39;
　　
　　library.add (faUserSecret) 

<强> 2。用一个单一的维护(如& lt; v-icon),用户通过数据或内容之类的属性创建真正的图标。

用户主动把图标的数据传递给组件:

 & lt; template>
　　& lt; v-icon:内容=癿diFlag"/比;
　　& lt;/template>
　　
　　& lt; script>
　　从& # 39;进口VIcon v-icon& # 39;
　　进口{mdiFlag} & # 39; @mdi/js # 39;
　　
　　出口默认{
　　组件:{
　　VIcon
　　}，
　　创建(){
　　对象。分配(这一点,{
　　mdiFlag
　　}）
　　}
　　}
　　& lt;/script> 

这是Vuetify支持的方式(Vuetify通过这种方式支持多种图标的使用方式),这种试在人机工程和直观性上有些损失,但没有方案1的缺点。

<强> 3。每个组件代表不同的图标(如& lt; icon-flag/祝辞,& lt; icon-star/祝辞等)。

这个方案里,每个组件通过一个图标工厂创造出来:

//icon-flag.js
　　进口{mdiFlag} & # 39; @mdi/js # 39;
　　进口{createIcon} & # 39; v-icon& # 39;
　　
　　出口默认createIcon(& # 39;国旗# 39;,mdiFlag) 

并通过这种方式使用:

 & lt; template>
　　& lt; icon-flag/比;
　　& lt;/template>
　　
　　& lt; script>
　　进口{IconFlag} & # 39; v-icon& # 39;
　　
　　出口默认{
　　组件:{
　　VIcon,
　　IconFlag
　　}
　　}
　　& lt;/script> 

这种方案在反应社区里被广泛采用,我在本文的后续部分将展开讨论。

我将更深入地说一下这种方案在Vue.js中的使用。

在Vue。js中,模板和脚本是分开的,组件通过组件选项注册。不过就像我们知道的,如果一个组件要用很多图标的话,这种方式会挺麻烦。

& lt; template> 　　& lt; div> 　　& lt; !——内联祝辞 　　& lt; icon-flag/比; 　　 　　& lt; !——有条件比; 　　& lt; icon-flag v=癴lag"/比; 　　& lt; icon-star v-else/比; 　　 　　& lt; !——动态比; 　　& lt;组件:=肮?# 63;IconFlag: IconStar"/比; 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　进口{IconFlag, IconStar} & # 39; foo-icons& # 39; 　　 　　出口默认{ 　　组件:{ 　　IconFlag, 　　IconStar 　　}， 　　数据(){ 　　返回{ 　　国旗:真 　　} 　　}， 　　创建(){ 　　对象。分配(这一点,{ 　　IconFlag, 　　IconStar 　　}） 　　} 　　} 　　& lt;/script>

可以看到如果想用图标的是绑定,我们必须把组件手动暴露到渲染上下文中。我们可以用字符串去替换组件定义来绕过,但对代码检查和类型系统来说就不那么友好。

& lt; template> 　　& lt; div> 　　& lt; !——内联祝辞 　　& lt; icon-flag/比; 　　 　　& lt; !——有条件比; 　　& lt; icon-flag v=癴lag"/比; 　　& lt; icon-star v-else/比; 　　 　　& lt; !——动态比; 　　& lt;组件:=肮?# 63;& # 39;icon-flag& # 39;:& # 39;icon-star& # 39;“/比; 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　进口{IconFlag, IconStar} & # 39; foo-icons& # 39; 　　 　　出口默认{ 　　组件:{ 　　IconFlag, 　　IconStar 　　}， 　　数据(){ 　　返回{ 　　国旗:真 　　} 　　} 　　} 　　& lt;/script>

在Vue.JS中使用图标组件的方法