效果
子组件
<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"/>
以上。