Vue.js图标选择组件实践的详细说明

本文介绍了Vue.js图标选择组件实践的详细说明，并与大家分享如下：

背景

最近，我们正在项目中做一个自定义菜单需求。其中一个功能是为菜单设置一个小图标，这是常见的左侧菜单

设置图标并不难，方案是字体图标，有很多可用的图标库，比如阿里巴巴的Iconfont，Fontaswsome等。问题在于如何优雅地提供上百个图标供用户选择，不需要一个个开发写标签，不需要一个个找图标。

字体图标库的Fontawesome方案

我们使用字体图标的方式一般是一个标签，比如I class=' icon font icon-home'/I，通常我们在开发中使用一些图标的时候，需要一个一个的写。如果我们显示10个图标，我们需要写10个标签。

在项目中，我使用的是Fontawesome图标库方案，之所以使用是因为有丰富的可用图标，基本上不需要特意去找合适的图标，而是直接下载它的图标库，免费图标就有800多个。

这么多图标需要一个一个写800多个I标签吗？三家公司拒绝！

Fontawesome的下载文件提供了svg格式的向导图，非常用户友好。用VSCode打开这个SVG文件

您可以看到它是一个熟悉的DOM，因为SVG本质上是一个XML。既然是DOM，那就牺牲JS解决方案，用浏览器打开这个SVG文件，在控制台中编写以下代码，获取所有图标名称：

const nodeArray=array . from(document . queryselectorall('符号'))；常量名称=节点数组.映射(item=item.id)名称.字符串()

图标组件

Daniel可以忽略所有图标的名称，所以很简单，一个数组循环。不要匆忙编写代码，我们的目的是将其打包成组件重用，所以首先创建一个Icons组件

提供一个过滤框，然后给出一个事件

模板div class=' ui-Fas ' El-input v-model=' name ' @ input . native=' filter icons '后缀-icon=' El-icon-search '占位符='请在iconList' :key='index '中输入icon name '/El-input ul class=' Fas-icon-list ' Li v-for='(item，index)@ click=' selectedIcon(item)' I class=' Fas ' : class='[' fa-' item]'/span { { item } }/span$emit('selected '，name) }，Reset () {this。name='' this。iconList=Fontawesome}}}/script首先将获得的所有图标名称放入一个solid.js文件中，以数组形式输出，引入组件中，然后循环数组iconList并输出I标记。fontawesome的使用方式是：I/I。

过滤函数使用数组的过滤方法。$emit('selected '，name)返回父组件的图标名称。

以上样式是通过elementwii的Popover和Input组件实现的

El-form-item label=' icon:' El-popover placement=' left-start ' width=' 540 ' trigger=' click ' @ show=' $ refs . icons . reset()' Popper-class=' Popper-class ' ui-icons ref=' icons ' @ selected=' selected icon '/El-input slot=' reference ' placeholder='请输入内容' readonly v-model='表单。menu _ icon' style='光标：指针；模板槽=' prepend ' I class=' Fas ' : class='[' fa '-form。menu _ icon]'/I/template/El-input/El-popup/El-form-item组件已经实现，然后还有引用，要么直接导入这个组件引用。您也可以装载到全局以供使用。下面是如何装载到全局以便使用，因为我的项目中的所有公共组件都装载到全局以便使用。

在组件级别创建新的index.js文件

从“”导入图标组件。/Icons . Vue ' const Icons={ install(Vue){ Vue.component(' ui-Icons '，Icons component)；} }导出默认图标；第四行以组件命名。该名称决定了如何使用组件。这是用户界面图标。使用时，它是：

ui-icons/然后在项目组件的根目录下创建新的index.js，这里是所有组件的集合

最后一步是在main.js中注册：

从“”导入自定义组件。/components/index . js ' object . keys(自定义组件)。foreach (key=vue.use(自定义组件[key])，这样组件就可以在ui-icons/in any中使用。项目中的vue文件。

附言

是否要在单击图标后关闭图标弹出窗口？Popover不能隐藏，除非你用鼠标点击其他地方。选择图标后，将其关闭。我的方法是：document.body.click()。

选定的图标(名称){这。form . menu _ icon=name//document . body . click()}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。