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 相关文章推荐
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
js获取form的方法
May 06 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
vue多次循环操作示例
Feb 08 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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
php实现httpclient类示例
2014/04/08 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
咖啡店自主创业商业计划书
2014/01/22 职场文书
学生自我评价范文
2014/02/02 职场文书
借款协议书
2014/04/12 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle