Vue.js中怎么实现一个图标选择组件-创新互联

Vue.js 中怎么实现一个图标选择组件，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联公司是一家集成都网站制作、网站设计、网站页面设计、网站优化SEO优化为一体的专业网络公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

具体如下：

背景

最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单

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

字体图标库 Fontawesome 方案

我们使用字体图标的方式，一般是一个   这样的标签，平常开发中用一些图标都是用到一个写一个，展示10个图标，就要写10个标签。

在项目中本人使用的是 Fontawesome 图标库方案，使用它是因为提供的可用图标比较丰富，基本上不需要特意去找合适的图标，直接把它的图标库下载过来，免费的有800多个。

这么多图标难道要一个一个手写800多个 i 标签吗？三连拒绝！

Fontawesome 下载后的文件中提供一个 svg格式的精灵图，这个非常人性化，用 VSCode 打开这个SVG文件

可以看到是熟悉的DOM，因为SVG本质上就是一个XML，既然是DOM，那么祭出JS大法吧，用浏览器打开这个SVG文件，在控制台编写如下代码获取所有的图标名称：

const nodeArray = Array.from(document.querySelectorAll('symbol'));
const names = nodeArray.map(item => item.id)
names.toString()

Icons组件

大牛可以忽略

拿到了所有图标的 name 那就好办了，一个数组循环呗。先别急着写代码，我们的目的是封装成组件复用，那么先创建一个 Icons 组件

提供一个筛选框，然后给一个事件即可

先把拿到的所有图标name放到一个 solid.js 文件中，输出为数组，在组件中引入，然后就是循环数组 iconList，输出i标签，Fontawesome 的使用方式是：。

筛选功能利用数组的 filter 方法，this.$emit('selected', name) 方式返回给父组件图标名称。

以上样式都是利用Element UI 的 Popover、Input 组件实现

组件实现了，接下来就是引用，既可以直接到导入此组件引用，也可以挂载到全局进行使用，这里说说挂载到全局使用的方式，因为我的项目中所有的公共组件都是挂载到全局的方式使用。

在组件平级新建一个 index.js 文件

import IconsCompontent from './Icons.vue'
const Icons = {
 install(Vue) {
  Vue.component('ui-icons', IconsCompontent);
 }
}
export default Icons;

第4行为组件命名，此名称决定了如何使用组件，这里是ui-icons，那么使用的时候就是：

接着在项目 components 根目录新建 index.js，这里是所有组件的集合

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

import CustomComponents from './components/index.js'
Object.keys(CustomComponents).forEach(key => Vue.use(CustomComponents[key]))

这样就可以在项目中任意.vue文件中以方式使用组件了。

后记

点击图标后要不要关闭图标弹出层（Popover）呢？Popover 是需要鼠标点击其他地方才会隐藏的，选择一个图标后就关闭 Popover 呢，我的做法是：document.body.click()。

selectedIcon (name) {
 this.form.menu_icon = name
 // document.body.click()
}

关于Vue.js 中怎么实现一个图标选择组件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

网页名称：Vue.js中怎么实现一个图标选择组件-创新互联
URL地址：http://cxhlcq.com/article/goeps.html