Vue.js 图标选择组件实践详解


Posted in Javascript onDecember 03, 2018

本文介绍了Vue.js 图标选择组件实践详解,分享给大家,具体如下:

Vue.js 图标选择组件实践详解

背景

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

Vue.js 图标选择组件实践详解

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

字体图标库 Fontawesome 方案

我们使用字体图标的方式,一般是一个 <i class="iconfont icon-home"></i>  这样的标签,平常开发中用一些图标都是用到一个写一个,展示10个图标,就要写10个标签。

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

Vue.js 图标选择组件实践详解

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

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

Vue.js 图标选择组件实践详解

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

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

Vue.js 图标选择组件实践详解

Icons组件

大牛可以忽略

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

Vue.js 图标选择组件实践详解

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

<template>
 <div class="ui-fas">
  <el-input v-model="name" @input.native="filterIcons" suffix-icon="el-icon-search" placeholder="请输入图标名称"></el-input>
  <ul class="fas-icon-list">
   <li v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
    <i class="fas" :class="['fa-' + item]" />
    <span>{{item}}</span>
   </li>
  </ul>
 </div>
</template>
<script>
import fontawesome from '@/extend/fontawesome/solid.js'
export default {
 name: 'compIcons',
 data () {
  return {
   name: '',
   iconList: fontawesome
  }
 },
 methods: {
  filterIcons () {
   if (this.name) {
    this.iconList = this.iconList.filter(item => item.includes(this.name))
   } else {
    this.iconList = fontawesome
   }
  },
  selectedIcon (name) {
   this.$emit('selected', name)
  },
  reset () {
   this.name = ''
   this.iconList = fontawesome
  }
 }
}
</script>

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

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

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

<el-form-item label="图标:" >
 <el-popover
  placement="left-start"
  width="540"
  trigger="click"
  @show="$refs.icons.reset()"
  popper-class="popper-class">
  <ui-icons ref="icons" @selected="selectedIcon" />
  <el-input slot="reference" placeholder="请输入内容" readonly v-model="form.menu_icon" style="cursor: pointer;">
   <template slot="prepend"><i class="fas" :class="['fa-' + form.menu_icon]"></i></template>
  </el-input>
 </el-popover>
</el-form-item>

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

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

Vue.js 图标选择组件实践详解

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

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

<ui-icons />

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

Vue.js 图标选择组件实践详解

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

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

这样就可以在项目中任意.vue文件中以<ui-icons />方式使用组件了。

后记

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
javascript每日必学之循环
Feb 19 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 #Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 #Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 #jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 #Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 #Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 #Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 #Javascript
You might like
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php session的应用详细介绍
2017/03/22 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python assert语句的简单使用示例
2019/07/28 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
交通事故协议书
2014/04/15 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL