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 相关文章推荐
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
劣质的PHP代码简化
2010/02/08 PHP
php 代码优化之经典示例
2011/03/24 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
微信红包随机生成算法php版
2016/07/21 PHP
golang与PHP输出excel示例
2016/07/22 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
PyQt5每天必学之组合框
2018/04/20 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python实现弹跳小球
2019/05/13 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python 3 判断2个字典相同
2019/08/06 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
会计实习生自我鉴定
2013/12/12 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
物业管理交接协议书
2016/03/24 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
Python实现位图分割的效果
2021/11/20 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技