vue-图标选择器

4,059 阅读8分钟

效果

子组件

<template>
 <div class="ui-fas">
  <el-input class="inputIcon" 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="[item]" />
   </li>
  </ul>
 </div>
</template>
<script>
export default {
 name: 'compIcons',
 data () {
  return {
   name: '',

   iconList: ["el-icon-platform-eleme", "el-icon-delete-solid", "el-icon-eleme", "el-icon-c-scale-to-original", "el-icon-sort-up", "el-icon-sort-down", "el-icon-upload", "el-icon-goods", "el-icon-video-pause", "el-icon-video-play", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion", "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-help", "el-icon-s-goods", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment", "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-tools", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-fold", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-user-solid", "el-icon-question", "el-icon-warning", "el-icon-remove", "el-icon-info", "el-icon-circle-plus", "el-icon-picture", "el-icon-location", "el-icon-error", "el-icon-success", "el-icon-camera-solid", "el-icon-d-caret", "el-icon-message-solid", "el-icon-menu", "el-icon-star-on", "el-icon-video-camera-solid", "el-icon-phone", "el-icon-more", "el-icon-share", "el-icon-caret-left", "el-icon-caret-right", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-date", "el-icon-circle-close", "el-icon-edit", "el-icon-folder", "el-icon-folder-opened", "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-tickets", "el-icon-document-remove", "el-icon-document-delete", "el-icon-document-copy", "el-icon-document-checked", "el-icon-document", "el-icon-document-add", "el-icon-printer", "el-icon-paperclip", "el-icon-download", "el-icon-upload2", "el-icon-takeaway-box", "el-icon-camera", "el-icon-search", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-monitor", "el-icon-attract", "el-icon-mobile", "el-icon-video-camera", "el-icon-scissors", "el-icon-umbrella", "el-icon-headset", "el-icon-brush", "el-icon-data-line", "el-icon-mouse", "el-icon-coordinate", "el-icon-magic-stick", "el-icon-reading", "el-icon-data-board", "el-icon-pie-chart", "el-icon-data-analysis", "el-icon-collection-tag", "el-icon-edit-outline", "el-icon-film", "el-icon-suitcase", "el-icon-suitcase-1", "el-icon-picture-outline-round", "el-icon-picture-outline", "el-icon-receiving", "el-icon-collection", "el-icon-files", "el-icon-notebook-1", "el-icon-notebook-2", "el-icon-toilet-paper", "el-icon-office-building", "el-icon-school", "el-icon-table-lamp", "el-icon-house", "el-icon-no-smoking", "el-icon-smoking", "el-icon-shopping-cart-full", "el-icon-shopping-cart-1", "el-icon-shopping-cart-2", "el-icon-shopping-bag-1", "el-icon-shopping-bag-2", "el-icon-present", "el-icon-box", "el-icon-bank-card", "el-icon-money", "el-icon-coin", "el-icon-wallet", "el-icon-discount", "el-icon-price-tag", "el-icon-bicycle", "el-icon-truck", "el-icon-ship", "el-icon-news", "el-icon-help", "el-icon-guide", "el-icon-male", "el-icon-female", "el-icon-thumb", "el-icon-cpu", "el-icon-link", "el-icon-connection", "el-icon-open", "el-icon-turn-off", "el-icon-set-up", "el-icon-chat-round", "el-icon-chat-line-round", "el-icon-chat-square", "el-icon-chat-dot-round", "el-icon-chat-dot-square", "el-icon-chat-line-square", "el-icon-message", "el-icon-postcard", "el-icon-position", "el-icon-turn-off-microphone", "el-icon-microphone", "el-icon-close-notification", "el-icon-bell", "el-icon-bangzhu", "el-icon-circle-plus-outline", "el-icon-remove-outline", "el-icon-circle-check", "el-icon-time", "el-icon-odometer", "el-icon-crop", "el-icon-aim", "el-icon-switch-button", "el-icon-full-screen", "el-icon-copy-document", "el-icon-star-off", "el-icon-basketball", "el-icon-football", "el-icon-soccer", "el-icon-baseball", "el-icon-mic", "el-icon-stopwatch", "el-icon-medal-1", "el-icon-medal", "el-icon-trophy", "el-icon-trophy-1", "el-icon-first-aid-kit", "el-icon-discover", "el-icon-place", "el-icon-location-outline", "el-icon-location-information", "el-icon-add-location", "el-icon-delete-location", "el-icon-map-location", "el-icon-alarm-clock", "el-icon-timer", "el-icon-watch-1", "el-icon-watch", "el-icon-wind-power", "el-icon-light-rain", "el-icon-lightning", "el-icon-heavy-rain", "el-icon-sunrise", "el-icon-sunrise-1", "el-icon-sunset", "el-icon-sunny", "el-icon-cloudy", "el-icon-partly-cloudy", "el-icon-cloudy-and-sunny", "el-icon-moon", "el-icon-moon-night", "el-icon-bottom-left", "el-icon-bottom-right", "el-icon-bottom", "el-icon-back", "el-icon-right", "el-icon-top-left", "el-icon-top-right", "el-icon-top", "el-icon-lock", "el-icon-unlock", "el-icon-user", "el-icon-key", "el-icon-arrow-up", "el-icon-arrow-right", "el-icon-arrow-down", "el-icon-arrow-left", "el-icon-d-arrow-left", "el-icon-d-arrow-right", "el-icon-close", "el-icon-check", "el-icon-plus", "el-icon-minus", "el-icon-delete", "el-icon-sold-out", "el-icon-sell", "el-icon-service", "el-icon-mobile-phone", "el-icon-sort", "el-icon-rank", "el-icon-refresh", "el-icon-loading", "el-icon-view", "el-icon-finished", "el-icon-more-outline", "el-icon-phone-outline", "el-icon-setting", "el-icon-warning-outline", "el-icon-refresh-right", "el-icon-refresh-left", "el-icon-dish", "el-icon-dish-1", "el-icon-food", "el-icon-chicken", "el-icon-fork-spoon", "el-icon-knife-fork", "el-icon-burger", "el-icon-tableware", "el-icon-sugar", "el-icon-dessert", "el-icon-ice-cream", "el-icon-hot-water", "el-icon-water-cup", "el-icon-coffee-cup", "el-icon-cold-drink", "el-icon-goblet", "el-icon-goblet-full", "el-icon-goblet-square", "el-icon-goblet-square-full", "el-icon-refrigerator", "el-icon-grape", "el-icon-watermelon", "el-icon-cherry", "el-icon-apple", "el-icon-pear", "el-icon-orange", "el-icon-coffee", "el-icon-ice-tea", "el-icon-ice-drink", "el-icon-milk-tea", "el-icon-potato-strips", "el-icon-lollipop", "el-icon-ice-cream-square", "el-icon-ice-cream-round"]


  }
 },
 methods: {
  filterIcons () {
   if (this.name) {
    this.iconList = this.iconList.filter(item => item.includes(this.name))
   } else {
    this.iconList = this.iconList
   }
  },
  selectedIcon (name) {
   this.$emit('selected', name)
  },
  reset () {
   this.name = ''
   this.iconList = this.iconList
  }
 }
}
</script>
<style>
.inputIcon{
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
}
.ui-fas{
    height: 300px;
    overflow: hidden;
}
.fas-icon-list{
    height: 100%;
    overflow:scroll;
}
.fas-icon-list li {
    float: left;
    margin:10px 10px;
}
.fas{
    font-size: 20px;
    color:#1989fa;
    cursor: pointer;
}
</style>


子组件的构成比较简单,就是一个ul>li的list,将图标循环展示出来就好。增加点击事件,选择图标即可。 其中,图标数据的获取,有多种方式,有两种比较常用的:

  • 阿里巴巴iconfont库,下载需要的icon
  • elementUI自带图标

后者图标较少,所以当你的项目需要备选图标时,你需要选择第一种方式。 笔者这里选择的是第二种方式。

获取图标库

在elementUI的图标库中,检查元素,将存有图标名称的span标签找到,将类名记住,然后通过获取内容的API(innerHTML),将图标名称取出,这是取出一个span内容的方式,当你需要把所有图标名称都取出来时,该如何呢?聪明的你肯定想到了,循环呗😄

以下就是elementUI的图标库全部类名

["el-icon-platform-eleme", "el-icon-delete-solid", "el-icon-eleme", "el-icon-c-scale-to-original", "el-icon-sort-up", "el-icon-sort-down", "el-icon-upload", "el-icon-goods", "el-icon-video-pause", "el-icon-video-play", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion", "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-help", "el-icon-s-goods", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment", "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-tools", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-fold", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-user-solid", "el-icon-question", "el-icon-warning", "el-icon-remove", "el-icon-info", "el-icon-circle-plus", "el-icon-picture", "el-icon-location", "el-icon-error", "el-icon-success", "el-icon-camera-solid", "el-icon-d-caret", "el-icon-message-solid", "el-icon-menu", "el-icon-star-on", "el-icon-video-camera-solid", "el-icon-phone", "el-icon-more", "el-icon-share", "el-icon-caret-left", "el-icon-caret-right", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-date", "el-icon-circle-close", "el-icon-edit", "el-icon-folder", "el-icon-folder-opened", "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-tickets", "el-icon-document-remove", "el-icon-document-delete", "el-icon-document-copy", "el-icon-document-checked", "el-icon-document", "el-icon-document-add", "el-icon-printer", "el-icon-paperclip", "el-icon-download", "el-icon-upload2", "el-icon-takeaway-box", "el-icon-camera", "el-icon-search", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-monitor", "el-icon-attract", "el-icon-mobile", "el-icon-video-camera", "el-icon-scissors", "el-icon-umbrella", "el-icon-headset", "el-icon-brush", "el-icon-data-line", "el-icon-mouse", "el-icon-coordinate", "el-icon-magic-stick", "el-icon-reading", "el-icon-data-board", "el-icon-pie-chart", "el-icon-data-analysis", "el-icon-collection-tag", "el-icon-edit-outline", "el-icon-film", "el-icon-suitcase", "el-icon-suitcase-1", "el-icon-picture-outline-round", "el-icon-picture-outline", "el-icon-receiving", "el-icon-collection", "el-icon-files", "el-icon-notebook-1", "el-icon-notebook-2", "el-icon-toilet-paper", "el-icon-office-building", "el-icon-school", "el-icon-table-lamp", "el-icon-house", "el-icon-no-smoking", "el-icon-smoking", "el-icon-shopping-cart-full", "el-icon-shopping-cart-1", "el-icon-shopping-cart-2", "el-icon-shopping-bag-1", "el-icon-shopping-bag-2", "el-icon-present", "el-icon-box", "el-icon-bank-card", "el-icon-money", "el-icon-coin", "el-icon-wallet", "el-icon-discount", "el-icon-price-tag", "el-icon-bicycle", "el-icon-truck", "el-icon-ship", "el-icon-news", "el-icon-help", "el-icon-guide", "el-icon-male", "el-icon-female", "el-icon-thumb", "el-icon-cpu", "el-icon-link", "el-icon-connection", "el-icon-open", "el-icon-turn-off", "el-icon-set-up", "el-icon-chat-round", "el-icon-chat-line-round", "el-icon-chat-square", "el-icon-chat-dot-round", "el-icon-chat-dot-square", "el-icon-chat-line-square", "el-icon-message", "el-icon-postcard", "el-icon-position", "el-icon-turn-off-microphone", "el-icon-microphone", "el-icon-close-notification", "el-icon-bell", "el-icon-bangzhu", "el-icon-circle-plus-outline", "el-icon-remove-outline", "el-icon-circle-check", "el-icon-time", "el-icon-odometer", "el-icon-crop", "el-icon-aim", "el-icon-switch-button", "el-icon-full-screen", "el-icon-copy-document", "el-icon-star-off", "el-icon-basketball", "el-icon-football", "el-icon-soccer", "el-icon-baseball", "el-icon-mic", "el-icon-stopwatch", "el-icon-medal-1", "el-icon-medal", "el-icon-trophy", "el-icon-trophy-1", "el-icon-first-aid-kit", "el-icon-discover", "el-icon-place", "el-icon-location-outline", "el-icon-location-information", "el-icon-add-location", "el-icon-delete-location", "el-icon-map-location", "el-icon-alarm-clock", "el-icon-timer", "el-icon-watch-1", "el-icon-watch", "el-icon-wind-power", "el-icon-light-rain", "el-icon-lightning", "el-icon-heavy-rain", "el-icon-sunrise", "el-icon-sunrise-1", "el-icon-sunset", "el-icon-sunny", "el-icon-cloudy", "el-icon-partly-cloudy", "el-icon-cloudy-and-sunny", "el-icon-moon", "el-icon-moon-night", "el-icon-bottom-left", "el-icon-bottom-right", "el-icon-bottom", "el-icon-back", "el-icon-right", "el-icon-top-left", "el-icon-top-right", "el-icon-top", "el-icon-lock", "el-icon-unlock", "el-icon-user", "el-icon-key", "el-icon-arrow-up", "el-icon-arrow-right", "el-icon-arrow-down", "el-icon-arrow-left", "el-icon-d-arrow-left", "el-icon-d-arrow-right", "el-icon-close", "el-icon-check", "el-icon-plus", "el-icon-minus", "el-icon-delete", "el-icon-sold-out", "el-icon-sell", "el-icon-service", "el-icon-mobile-phone", "el-icon-sort", "el-icon-rank", "el-icon-refresh", "el-icon-loading", "el-icon-view", "el-icon-finished", "el-icon-more-outline", "el-icon-phone-outline", "el-icon-setting", "el-icon-warning-outline", "el-icon-refresh-right", "el-icon-refresh-left", "el-icon-dish", "el-icon-dish-1", "el-icon-food", "el-icon-chicken", "el-icon-fork-spoon", "el-icon-knife-fork", "el-icon-burger", "el-icon-tableware", "el-icon-sugar", "el-icon-dessert", "el-icon-ice-cream", "el-icon-hot-water", "el-icon-water-cup", "el-icon-coffee-cup", "el-icon-cold-drink", "el-icon-goblet", "el-icon-goblet-full", "el-icon-goblet-square", "el-icon-goblet-square-full", "el-icon-refrigerator", "el-icon-grape", "el-icon-watermelon", "el-icon-cherry", "el-icon-apple", "el-icon-pear", "el-icon-orange", "el-icon-coffee", "el-icon-ice-tea", "el-icon-ice-drink", "el-icon-milk-tea", "el-icon-potato-strips", "el-icon-lollipop", "el-icon-ice-cream-square", "el-icon-ice-cream-round"]


父组件

//引入组件
import selectIcon from "../cModule/iconSelect.vue";

//注册组件
components: {
    selectIcon
  },
  
<!--使用-->
<select-icon ref="icons" @selected="selectedIcon"/>

以上。

参考文章

Vue.js 图标选择组件实践