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

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

<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>
< >
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
  }
 }
}
</ >

<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>

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

<ui-icons />

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

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