Vue Element前端应用开发之图标的维护和使用

概述 Vue-Awesome 是基于 Vue.js 的 SVG 图标组件，内置图标来自 Font Awesome。本篇随笔先来上一个图标管理的界面效果，然后在逐一进行介绍Element内置图标和Vue-Awesome的图标吧。 Element图标管理界面如下：基于Vue-Awesome的图标管理如下所示。其中查询提供了名称进行图标查询，以及限制一次性展示多少个，另外提供一个自定义颜色选项，从而可以改变图标的展示颜色。 1、Vue-Awesome的使用介绍 Vue-Awesome 的 npm的安装命令如下所示：安装方式如下所示界面使用代码如下所示，详细Demo可以参考https://justineo.github.io/vue-awesome/demo/了解。 Vue-Awesome图标提供了一些prop的属性设置，参考下面列表所示。 name: string 图标名称。如果本组件没有用作图标堆栈的容器，那么这个字段是必须的。所有合法的值都对应于图标文件相对于icons目录的路径。请注意当你在 FontAwesome 官网查找到图标名词后，需要确认一下图标集的名称。比如，在500px这个图标的详情页会有一个 URL 参数style=brands，故图标名称就是brands/500px。默认情况下，只能使用 FontAwesome 的免费图标，另外由于solid样式中的图标最多，我们将其设为了默认图标集，所以路径前缀可以省略。当传入null时，整个组件将不会渲染。 scale: number|string 用来调整图标尺寸，默认值为1。 spin: boolean 用来指定图标是否需要旋转。默认值为false。（不能与pulse一同使用。） pulse: boolean 用来指定图标是否有脉冲旋转的效果。默认值为false。（不能与spin一同使用。） inverse: boolean 为true时图标颜色将被设置为#fff。默认值为false。 flip: 'vertical'|'horizontal'|'both' 用来指定图标是否需要翻转。 label: string 当指定时会设置图标的aria-label。 title: string 为图标设置标题。另外，我们也可以注册自定义图标，如下所示。如果你的 SVG 文件有多个路径或多边形，以及/或者你想预定义一些样式，可以用如下方式进行注册：路径方式：多边形方式：对于自定义的这些图标，我们可以把它们一起放在一个独立的JS文件里面进行定义，然后全局统一加入即可。使用上和其他的图标没有差异，只是名称不同而已。 2、导入Element 图标和Vue-Awesome图标在我们进行页面管理的时候，我们需要提取Element 图标和Vue-Awesome图标，以便能够进行界面的展示处理。 Element图标，我们只需要在一个JS文件里面，包含它的名称进去一个列表里面即可，如下定义所示。在其中录入对应Element的图表名称，移除el-icon-的前缀即可构成所需列表的每项内容。而对于Vue-Awesome图标，我们安装对应的组件后，它的图标资源肯定也一定下载下来了，我们找到对应的node_modules 目录下的文件就可以看到了，如下截图所示。可以看到它的每个图标对应一个js文件，而且不同样式还有不同的目录的，我们只需要自动加入对应的文件名称即可。定义一个js文件，如vue-awesome-icon.js，用来获取对应Awesome图标名称，如下逻辑所示通过require.context 的操作以及仅需filter的数组过滤，我们就可以获得对应的Awesome图标名称了。在管理页面里面，我们需要引入Element和Vue-Awesome的图标管理文件，如下所示。然后构造页面的data数据，如下所示，其中searchForm 是用来承载查询条件的。然后增加几个Computed函数，用来处理数据的过滤查询等操作。然后在method里面，对常规的图标进行生成处理即可。对于界面的展示，我们以Vue-awesome图标展示为例介绍，如下所示。这样就可以实现对应图标的动态过滤和展示了。以上就是Vue Element前端应用开发之图标的维护和使用的详细内容，更多关于Vue Element之图标的维护和使用的资料请关注脚本之家其它相关文章！