做菜单需要，实现了一个font-awesome 图标选择器，不多说，上代码
<template>
<Poptip content="content" placement="bottom" v-model="show" >
<Button type="success">选择图标</Button>
<div slot="content">
<Input v-model="search" clearable/>
<br/>
<Row :gutter="10" style="line-height: 30px; height: 300px; min-width: 300px; overflow-y: auto ;">
<i-col :span="8" v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer" >
<i :class="'fa fa-' + icon" @click="changeIcon(icon)"/><span @click="changeIcon(icon)"> {{icon}}</span>
</i-col>
</Row>
</div>
</Poptip>
</template>
<script>
const faIconsList = [
"glass","th-large","arrow-right","arrow-up","arrow-down","mail-forward","share","expand","compress","plus","minus","asterisk","th","exclamation-circle","gift","leaf","fire","eye","eye-slash","warning","exclamation-triangle","plane","calendar","th-list","random","comment","magnet","chevron-up","chevron-down","retweet","shopping-cart","folder","folder-open","arrows-v","check","arrows-h","bar-chart-o","bar-chart","twitter-square","facebook-square","camera-retro","key","gears","cogs","comments","remove","thumbs-o-up","thumbs-o-down","star-half","heart-o","sign-out","linkedin-square","thumb-tack","external-link","sign-in","trophy","close","github-square","upload","lemon-o","phone","square-o","bookmark-o","phone-square","twitter","facebook","github","times","unlock","credit-card","rss","hdd-o","bullhorn","bell","certificate","hand-o-right","hand-o-left","hand-o-up","search-plus","hand-o-down","arrow-circle-left","arrow-circle-right","arrow-circle-up","arrow-circle-down","globe","wrench","tasks","filter","briefcase","search-minus","arrows-alt","group","users","chain","link","cloud","flask","cut","scissors","copy","power-off","files-o","paperclip","save","floppy-o","square","navicon","reorder","bars","list-ul","list-ol","music","signal","strikethrough","underline","table","magic","truck","pinterest","pinterest-square","google-plus-square","google-plus","money","gear","caret-down","caret-up","caret-left","caret-right","columns","unsorted","sort","sort-down","sort-desc","sort-up","cog","sort-asc","envelope","linkedin","rotate-left","undo","legal","gavel","dashboard","tachometer","comment-o","trash-o","comments-o","flash","bolt","sitemap","umbrella","paste","clipboard","lightbulb-o","exchange","cloud-download","home","cloud-upload","user-md","stethoscope","suitcase","bell-o","coffee","cutlery","file-text-o","building-o","hospital-o","file-o","ambulance","medkit","fighter-jet","beer","h-square","plus-square","angle-double-left","angle-double-right","angle-double-up","angle-double-down","clock-o","angle-left","angle-right","angle-up","angle-down","desktop","laptop","tablet","mobile-phone","mobile","circle-o","road","quote-left","quote-right","spinner","circle","mail-reply","reply","github-alt","folder-o","folder-open-o","smile-o","download","frown-o","meh-o","gamepad","keyboard-o","flag-o","flag-checkered","terminal","code","mail-reply-all","reply-all","arrow-circle-o-down","star-half-empty","star-half-full","star-half-o","location-arrow","crop","code-fork","unlink","chain-broken","question","info","search","arrow-circle-o-up","exclamation","superscript","subscript","eraser","puzzle-piece","microphone","microphone-slash","shield","calendar-o","fire-extinguisher","inbox","rocket","maxcdn","chevron-circle-left","chevron-circle-right","chevron-circle-up","chevron-circle-down","html5","css3","anchor","unlock-alt","play-circle-o","bullseye","ellipsis-h","ellipsis-v","rss-square","play-circle","ticket","minus-square","minus-square-o","level-up","level-down","rotate-right","check-square","pencil-square","external-link-square","share-square","compass","toggle-down","caret-square-o-down","toggle-up","caret-square-o-up","toggle-right","repeat","caret-square-o-right","euro","eur","gbp","dollar","usd","rupee","inr","cny","rmb","refresh","yen","jpy","ruble","rouble","rub","won","krw","bitcoin","btc","file","list-alt","file-text","sort-alpha-asc","sort-alpha-desc","sort-amount-asc","sort-amount-desc","sort-numeric-asc","sort-numeric-desc","thumbs-up","thumbs-down","youtube-square","lock","youtube","xing","xing-square","youtube-play","dropbox","stack-overflow","instagram","flickr","adn","bitbucket","flag","bitbucket-square","tumblr","tumblr-square","long-arrow-down","long-arrow-up","long-arrow-left","long-arrow-right","apple","windows","android","headphones","linux","dribbble","skype","foursquare","trello","female","male","gittip","sun-o","moon-o","envelope-o","volume-off","archive","bug","vk","weibo","renren","pagelines","stack-exchange","arrow-circle-o-right","arrow-circle-o-left","toggle-left","volume-down","caret-square-o-left","dot-circle-o","wheelchair","vimeo-square","turkish-lira","try","plus-square-o","space-shuttle","slack","envelope-square","volume-up","wordpress","openid","institution","bank","university","mortar-board","graduation-cap","yahoo","google","reddit","qrcode","reddit-square","stumbleupon-circle","stumbleupon","delicious","digg","pied-piper","pied-piper-alt","drupal","joomla","language","barcode","fax","building","child","paw","spoon","cube","cubes","behance","behance-square","steam","tag","steam-square","recycle","automobile","car","cab","taxi","tree","spotify","deviantart","soundcloud","tags","database","file-pdf-o","file-word-o","file-excel-o","file-powerpoint-o","file-photo-o","file-picture-o","file-image-o","file-zip-o","file-archive-o","book","file-sound-o","file-audio-o","file-movie-o","file-video-o","file-code-o","vine","codepen","jsfiddle","life-bouy","life-buoy","bookmark","life-saver","support","life-ring","circle-o-notch","ra","rebel","ge","empire","git-square","git","print","hacker-news","tencent-weibo","qq","wechat","weixin","send","paper-plane","send-o","paper-plane-o","history","heart","camera","circle-thin","header","paragraph","sliders","share-alt","share-alt-square","bomb","soccer-ball-o","futbol-o","tty","font","binoculars","plug","slideshare","twitch","yelp","newspaper-o","wifi","calculator","paypal","google-wallet","bold","cc-visa","cc-mastercard","cc-discover","cc-amex","cc-paypal","cc-stripe","bell-slash","bell-slash-o","trash","copyright","italic","at","eyedropper","paint-brush","birthday-cake","area-chart","pie-chart","line-chart","lastfm","lastfm-square","toggle-off","text-height","toggle-on","bicycle","bus","ioxhost","angellist","cc","shekel","sheqel","ils","meanpath","text-width","align-left","align-center","align-right","align-justify","star","list","dedent","outdent","indent","video-camera","photo","image","picture-o","pencil","map-marker","star-o","adjust","tint","edit","pencil-square-o","share-square-o","check-square-o","arrows","step-backward","fast-backward","backward","user","play","pause","stop","forward","fast-forward","step-forward","eject","chevron-left","chevron-right","plus-circle","film","minus-circle","times-circle","check-circle","question-circle","info-circle","crosshairs","times-circle-o","check-circle-o","ban","arrow-left"
]
export default{
model: {
prop: 'value',
event: 'input'
},
props: {
value: ''
},
components: {},
data: function () {
return {
search: '',
show: false
}
},
computed: {
faIconsFilter(){
if(this.search == null || this.search.length == 0){
return faIconsList;
}
return faIconsList.filter(item => {
return item.indexOf(this.search) != -1;
})
}
},
created: function () {
},
methods: {
changeIcon(icon){
console.log(icon)
this.show = false;
this.$emit("input", icon);
}
}
}
</script>
<style>
</style>
调用示例：
注：需要在 html 中引入 font-awesome 的css文件
<template>
<div>
<FaIconChooser v-model="icon" ></FaIconChooser> <span v-if="icon"> <i :class="'fa fa-'+ icon"/> {{icon}}</span>
</div>
</template>
<script>
import FaIconChooser from './FaIconChooser.vue';
export default{
components: {FaIconChooser},
data: function () {
return { icon: null}
}
}
</script>
后记 将icon常量变成动态获取
缺点：有些图标不能显示
const that = this;
let client = new XMLHttpRequest();
client.open("GET", "/cdn/font-awesome/fonts/fontawesome-webfont.svg");
client.onreadystatechange = function () {
if (this.readyState != 4) {
return;
}
if (this.status === 200) {
let resp = this.response;
if (!resp || resp === "") return;
let iconArr = resp.match(/glyph-name="(\S*)/gm);
iconArr.forEach(v => {
that.faIconList.push(v.split("=")[1].replace("\"","").replace("\"",""));
});
} else {
that.faIconList = [];
that.$Message.error("获取图标信息失败")
}
};
client.responseType = "text";
client.setRequestHeader("Accept", "text/plan");
client.send();
网友评论