vue view design 图标选择器

代码来自
添加链接描述


<template>
<!--    right-->
<!--    placement="bottom"--><Poptip   content="content" placement="right" v-model="show" >
<!--        <Button type="success">选择图标</Button>--><Button type="normal">选择图标</Button><div   slot="content"><Input v-model="search" clearable/><br/>
<!--            style="line-height: 30px; height: 300px; min-width: 300px; overflow-y: auto ;"-->
<!--            :gutter="10"-->
<!--            :gutter="20"--><Row  class="iconRow" >
<!--                https://iview.github.io/components/icon-->
<!--                <i-col :type="icon" :span="8" v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer"  >-->
<!--                    <i :class="'fa fa-' + icon" @click="changeIcon(icon)"/><span @click="changeIcon(icon)">&nbsp;{{icon}}</span>-->
<!--                </i-col>-->
<!--                type="ionic"-->
<!--                :span="8"-->
<!--                <Icon :type="icon" @click="changeIcon(icon)" :span="8" v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer"  >-->
<!--&lt;!&ndash;                    <i :class="'fa fa-' + icon" @click="changeIcon(icon)"/>&ndash;&gt;-->
<!--                    <span @click="changeIcon(icon)">&nbsp;{{icon}}</span>-->
<!--                </Icon>-->
<!--                :span="8"-->
<!--                :span="14"--><div class="oneIcon" @click="changeIcon(icon)"  v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer" ><Icon  class="icon-big" :type="icon"></Icon><span @click="changeIcon(icon)">&nbsp;{{icon}}</span></div></Row></div></Poptip>
</template>
<script>import Common from "../utils/common";// 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"// ]const faIconsList=Common.viewDesignIconListexport 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 scoped>.icon-big{font-size: 30px;}.oneIcon{/*margin-left: 2px;*/margin-left: 10px;}.iconRow{/*font-size: 20px;*//*font-size: 30px;*//*line-height: 30px;*//*height: 300px;*/height: 800px;width: 600px;/*min-width: 300px;*//*overflow-y: auto ;*/}
</style>

<template><div><Icon type="ionic"></Icon>
<!--        <Icon :type="ios-archive" :size="iconSize"></Icon>--><Icon type="ios-archive" ></Icon><FaIconChooser v-model="icon" ></FaIconChooser> <span v-if="icon">&nbsp;<i :class="'fa fa-'+ icon"/>&nbsp;{{icon}}</span></div>
</template>
<script>// import FaIconChooser from './FaIconChooser.vue';// import FaIconChooser from '/FaIconChooser.vue';// import AlbumManage from "../manage/AlbumManage";import FaIconChooser from "../components/FaIconChooser";export default{components: {FaIconChooser,// FaIconChooser},data: function () {return { icon: null}}}
</script>

let  viewDesignIconList=["ios-add","md-add","ios-add-circle","ios-add-circle-outline","md-add-circle","ios-alarm","ios-alarm-outline","md-alarm","ios-albums","ios-albums-outline","md-albums","ios-alert","ios-alert-outline","md-alert","ios-american-football","ios-american-football-outline","md-american-football","ios-analytics","ios-analytics-outline","md-analytics","logo-android","logo-angular","ios-aperture","ios-aperture-outline","md-aperture","logo-apple","ios-apps","ios-apps-outline","md-apps","ios-appstore","ios-appstore-outline","md-appstore","ios-archive","ios-archive-outline","md-archive","ios-arrow-back","md-arrow-back","ios-arrow-down","md-arrow-down","ios-arrow-dropdown","md-arrow-dropdown","ios-arrow-dropdown-circle","md-arrow-dropdown-circle","ios-arrow-dropleft","md-arrow-dropleft","ios-arrow-dropleft-circle","md-arrow-dropleft-circle","ios-arrow-dropright","md-arrow-dropright","ios-arrow-dropright-circle","md-arrow-dropright-circle","ios-arrow-dropup","md-arrow-dropup","ios-arrow-dropup-circle","md-arrow-dropup-circle","ios-arrow-forward","md-arrow-forward","ios-arrow-round-back","md-arrow-round-back","ios-arrow-round-down","md-arrow-round-down","ios-arrow-round-forward","md-arrow-round-forward","ios-arrow-round-up","md-arrow-round-up","ios-arrow-up","md-arrow-up","ios-at","ios-at-outline","md-at","ios-attach","md-attach","ios-backspace","ios-backspace-outline","md-backspace","ios-barcode","ios-barcode-outline","md-barcode","ios-baseball","ios-baseball-outline","md-baseball","ios-basket","ios-basket-outline","md-basket","ios-basketball","ios-basketball-outline","md-basketball","ios-battery-charging","md-battery-charging","ios-battery-dead","md-battery-dead","ios-battery-full","md-battery-full","ios-beaker","ios-beaker-outline","md-beaker","ios-beer","ios-beer-outline","md-beer","ios-bicycle","md-bicycle","logo-bitcoin","ios-bluetooth","md-bluetooth","ios-boat","ios-boat-outline","md-boat","ios-body","ios-body-outline","md-body","ios-bonfire","ios-bonfire-outline","md-bonfire","ios-book","ios-book-outline","md-book","ios-bookmark","ios-bookmark-outline","md-bookmark","ios-bookmarks","ios-bookmarks-outline","md-bookmarks","ios-bowtie","ios-bowtie-outline","md-bowtie","ios-briefcase","ios-briefcase-outline","md-briefcase","ios-browsers","ios-browsers-outline","md-browsers","ios-brush","ios-brush-outline","md-brush","logo-buffer","ios-bug","ios-bug-outline","md-bug","ios-build","ios-build-outline","md-build","ios-bulb","ios-bulb-outline","md-bulb","ios-bus","ios-bus-outline","md-bus","ios-cafe","ios-cafe-outline","md-cafe","ios-calculator","ios-calculator-outline","md-calculator","ios-calendar","ios-calendar-outline","md-calendar","ios-call","ios-call-outline","md-call","ios-camera","ios-camera-outline","md-camera","ios-car","ios-car-outline","md-car","ios-card","ios-card-outline","md-card","ios-cart","ios-cart-outline","md-cart","ios-cash","ios-cash-outline","md-cash","ios-chatboxes","ios-chatboxes-outline","md-chatboxes","ios-chatbubbles","ios-chatbubbles-outline","md-chatbubbles","ios-checkbox","ios-checkbox-outline","md-checkbox","md-checkbox-outline","ios-checkmark","md-checkmark","ios-checkmark-circle","ios-checkmark-circle-outline","md-checkmark-circle","md-checkmark-circle-outline","logo-chrome","ios-clipboard","ios-clipboard-outline","md-clipboard","ios-clock","ios-clock-outline","md-clock","ios-close","md-close","ios-close-circle","ios-close-circle-outline","md-close-circle","ios-closed-captioning","ios-closed-captioning-outline","md-closed-captioning","ios-cloud","ios-cloud-outline","md-cloud","ios-cloud-circle","ios-cloud-circle-outline","md-cloud-circle","ios-cloud-done","ios-cloud-done-outline","md-cloud-done","ios-cloud-download","ios-cloud-download-outline","md-cloud-download","md-cloud-outline","ios-cloud-upload","ios-cloud-upload-outline","md-cloud-upload","ios-cloudy","ios-cloudy-outline","md-cloudy","ios-cloudy-night","ios-cloudy-night-outline","md-cloudy-night","ios-code","md-code","ios-code-download","md-code-download","ios-code-working","md-code-working","logo-codepen","ios-cog","ios-cog-outline","md-cog","ios-color-fill","ios-color-fill-outline","md-color-fill","ios-color-filter","ios-color-filter-outline","md-color-filter","ios-color-palette","ios-color-palette-outline","md-color-palette","ios-color-wand","ios-color-wand-outline","md-color-wand","ios-compass","ios-compass-outline","md-compass","ios-construct","ios-construct-outline","md-construct","ios-contact","ios-contact-outline","md-contact","ios-contacts","ios-contacts-outline","md-contacts","ios-contract","md-contract","ios-contrast","md-contrast","ios-copy","ios-copy-outline","md-copy","ios-create","ios-create-outline","md-create","ios-crop","ios-crop-outline","md-crop","logo-css3","ios-cube","ios-cube-outline","md-cube","ios-cut","ios-cut-outline","md-cut","logo-designernews","ios-desktop","ios-desktop-outline","md-desktop","ios-disc","ios-disc-outline","md-disc","ios-document","ios-document-outline","md-document","ios-done-all","md-done-all","ios-download","ios-download-outline","md-download","logo-dribbble","logo-dropbox","ios-easel","ios-easel-outline","md-easel","ios-egg","ios-egg-outline","md-egg","logo-euro","ios-exit","ios-exit-outline","md-exit","ios-expand","md-expand","ios-eye","ios-eye-outline","md-eye","ios-eye-off","ios-eye-off-outline","md-eye-off","logo-facebook","ios-fastforward","ios-fastforward-outline","md-fastforward","ios-female","md-female","ios-filing","ios-filing-outline","md-filing","ios-film","ios-film-outline","md-film","ios-finger-print","md-finger-print","ios-flag","ios-flag-outline","md-flag","ios-flame","ios-flame-outline","md-flame","ios-flash","ios-flash-outline","md-flash","ios-flask","ios-flask-outline","md-flask","ios-flower","ios-flower-outline","md-flower","ios-folder","ios-folder-outline","md-folder","ios-folder-open","ios-folder-open-outline","md-folder-open","ios-football","ios-football-outline","md-football","logo-foursquare","logo-freebsd-devil","ios-funnel","ios-funnel-outline","md-funnel","ios-game-controller-a","ios-game-controller-a-outline","md-game-controller-a","ios-game-controller-b","ios-game-controller-b-outline","md-game-controller-b","ios-git-branch","md-git-branch","ios-git-commit","md-git-commit","ios-git-compare","md-git-compare","ios-git-merge","md-git-merge","ios-git-network","md-git-network","ios-git-pull-request","md-git-pull-request","logo-github","ios-glasses","ios-glasses-outline","md-glasses","ios-globe","ios-globe-outline","md-globe","logo-google","logo-googleplus","ios-grid","ios-grid-outline","md-grid","logo-hackernews","ios-hammer","ios-hammer-outline","md-hammer","ios-hand","ios-hand-outline","md-hand","ios-happy","ios-happy-outline","md-happy","ios-headset","ios-headset-outline","md-headset","ios-heart","ios-heart-outline","md-heart","md-heart-outline","ios-help","md-help","ios-help-buoy","ios-help-buoy-outline","md-help-buoy","ios-help-circle","ios-help-circle-outline","md-help-circle","ios-home","ios-home-outline","md-home","logo-html5","ios-ice-cream","ios-ice-cream-outline","md-ice-cream","ios-image","ios-image-outline","md-image","ios-images","ios-images-outline","md-images","ios-infinite","ios-infinite-outline","md-infinite","ios-information","md-information","ios-information-circle","ios-information-circle-outline","md-information-circle","logo-instagram","ios-ionic","ios-ionic-outline","md-ionic","ios-ionitron","ios-ionitron-outline","md-ionitron","logo-javascript","ios-jet","ios-jet-outline","md-jet","ios-key","ios-key-outline","md-key","ios-keypad","ios-keypad-outline","md-keypad","ios-laptop","md-laptop","ios-leaf","ios-leaf-outline","md-leaf","ios-link","ios-link-outline","md-link","logo-linkedin","ios-list","md-list","ios-list-box","ios-list-box-outline","md-list-box","ios-locate","ios-locate-outline","md-locate","ios-lock","ios-lock-outline","md-lock","ios-log-in","md-log-in","ios-log-out","md-log-out","ios-magnet","ios-magnet-outline","md-magnet","ios-mail","ios-mail-outline","md-mail","ios-mail-open","ios-mail-open-outline","md-mail-open","ios-male","md-male","ios-man","ios-man-outline","md-man","ios-map","ios-map-outline","md-map","logo-markdown","ios-medal","ios-medal-outline","md-medal","ios-medical","ios-medical-outline","md-medical","ios-medkit","ios-medkit-outline","md-medkit","ios-megaphone","ios-megaphone-outline","md-megaphone","ios-menu","ios-menu-outline","md-menu","ios-mic","ios-mic-outline","md-mic","ios-mic-off","ios-mic-off-outline","md-mic-off","ios-microphone","ios-microphone-outline","md-microphone","ios-moon","ios-moon-outline","md-moon","ios-more","ios-more-outline","md-more","ios-move","md-move","ios-musical-note","ios-musical-note-outline","md-musical-note","ios-musical-notes","ios-musical-notes-outline","md-musical-notes","ios-navigate","ios-navigate-outline","md-navigate","ios-no-smoking","ios-no-smoking-outline","md-no-smoking","logo-nodejs","ios-notifications","ios-notifications-outline","md-notifications","ios-notifications-off","ios-notifications-off-outline","md-notifications-off","md-notifications-outline","ios-nuclear","ios-nuclear-outline","md-nuclear","ios-nutrition","ios-nutrition-outline","md-nutrition","logo-octocat","ios-open","ios-open-outline","md-open","ios-options","ios-options-outline","md-options","ios-outlet","ios-outlet-outline","md-outlet","ios-paper","ios-paper-outline","md-paper","ios-paper-plane","ios-paper-plane-outline","md-paper-plane","ios-partly-sunny","ios-partly-sunny-outline","md-partly-sunny","ios-pause","ios-pause-outline","md-pause","ios-paw","ios-paw-outline","md-paw","ios-people","ios-people-outline","md-people","ios-person","ios-person-outline","md-person","ios-person-add","ios-person-add-outline","md-person-add","ios-phone-landscape","md-phone-landscape","ios-phone-portrait","md-phone-portrait","ios-photos","ios-photos-outline","md-photos","ios-pie","ios-pie-outline","md-pie","ios-pin","ios-pin-outline","md-pin","ios-pint","ios-pint-outline","md-pint","logo-pinterest","ios-pizza","ios-pizza-outline","md-pizza","ios-plane","ios-plane-outline","md-plane","ios-planet","ios-planet-outline","md-planet","ios-play","ios-play-outline","md-play","logo-playstation","ios-podium","ios-podium-outline","md-podium","ios-power","ios-power-outline","md-power","ios-pricetag","ios-pricetag-outline","md-pricetag","ios-pricetags","ios-pricetags-outline","md-pricetags","ios-print","ios-print-outline","md-print","ios-pulse","ios-pulse-outline","md-pulse","logo-python","ios-qr-scanner","md-qr-scanner","ios-quote","ios-quote-outline","md-quote","ios-radio","ios-radio-outline","md-radio","ios-radio-button-off","md-radio-button-off","ios-radio-button-on","md-radio-button-on","ios-rainy","ios-rainy-outline","md-rainy","ios-recording","ios-recording-outline","md-recording","logo-reddit","ios-redo","ios-redo-outline","md-redo","ios-refresh","md-refresh","ios-refresh-circle","ios-refresh-circle-outline","md-refresh-circle","ios-remove","md-remove","ios-remove-circle","ios-remove-circle-outline","md-remove-circle","ios-reorder","md-reorder","ios-repeat","md-repeat","ios-resize","md-resize","ios-restaurant","ios-restaurant-outline","md-restaurant","ios-return-left","md-return-left","ios-return-right","md-return-right","ios-reverse-camera","ios-reverse-camera-outline","md-reverse-camera","ios-rewind","ios-rewind-outline","md-rewind","ios-ribbon","ios-ribbon-outline","md-ribbon","ios-rose","ios-rose-outline","md-rose","logo-rss","ios-sad","ios-sad-outline","md-sad","logo-sass","ios-school","ios-school-outline","md-school","ios-search","ios-search-outline","md-search","ios-send","ios-send-outline","md-send","ios-settings","ios-settings-outline","md-settings","ios-share","ios-share-outline","md-share","ios-share-alt","ios-share-alt-outline","md-share-alt","ios-shirt","ios-shirt-outline","md-shirt","ios-shuffle","md-shuffle","ios-skip-backward","ios-skip-backward-outline","md-skip-backward","ios-skip-forward","ios-skip-forward-outline","md-skip-forward","logo-skype","logo-snapchat","ios-snow","ios-snow-outline","md-snow","ios-speedometer","ios-speedometer-outline","md-speedometer","ios-square","ios-square-outline","md-square","md-square-outline","ios-star","ios-star-outline","md-star","ios-star-half","md-star-half","md-star-outline","ios-stats","ios-stats-outline","md-stats","logo-steam","ios-stopwatch","ios-stopwatch-outline","md-stopwatch","ios-subway","ios-subway-outline","md-subway","ios-sunny","ios-sunny-outline","md-sunny","ios-swap","md-swap","ios-switch","ios-switch-outline","md-switch","ios-sync","md-sync","ios-tablet-landscape","md-tablet-landscape","ios-tablet-portrait","md-tablet-portrait","ios-tennisball","ios-tennisball-outline","md-tennisball","ios-text","ios-text-outline","md-text","ios-thermometer","ios-thermometer-outline","md-thermometer","ios-thumbs-down","ios-thumbs-down-outline","md-thumbs-down","ios-thumbs-up","ios-thumbs-up-outline","md-thumbs-up","ios-thunderstorm","ios-thunderstorm-outline","md-thunderstorm","ios-time","ios-time-outline","md-time","ios-timer","ios-timer-outline","md-timer","ios-train","ios-train-outline","md-train","ios-transgender","md-transgender","ios-trash","ios-trash-outline","md-trash","ios-trending-down","md-trending-down","ios-trending-up","md-trending-up","ios-trophy","ios-trophy-outline","md-trophy","logo-tumblr","logo-tux","logo-twitch","logo-twitter","ios-umbrella","ios-umbrella-outline","md-umbrella","ios-undo","ios-undo-outline","md-undo","ios-unlock","ios-unlock-outline","md-unlock","logo-usd","ios-videocam","ios-videocam-outline","md-videocam","logo-vimeo","ios-volume-down","md-volume-down","ios-volume-mute","md-volume-mute","ios-volume-off","md-volume-off","ios-volume-up","md-volume-up","ios-walk","md-walk","ios-warning","ios-warning-outline","md-warning","ios-watch","md-watch","ios-water","ios-water-outline","md-water","logo-whatsapp","ios-wifi","ios-wifi-outline","md-wifi","logo-windows","ios-wine","ios-wine-outline","md-wine","ios-woman","ios-woman-outline","md-woman","logo-wordpress","logo-xbox","logo-yahoo","logo-yen","logo-youtube","ios-loading"
]

获取icon名字，爬取网页
view design 官网 icons

// let  iconList =  document.getElementsByClassName("page-icon-search-list")[0]
// let  iconList =  document.getElementsByClassName("page-icon-search-item")[0]
let  iconList =  document.getElementsByClassName("page-icon-search-item")
let iconNames=[]
for (var i = 0; i < iconList.length; i++) {let  iconDom=   iconList[i]let  name=   iconDom.textContent// console.log(name)iconNames.push(name)
}
// iconList.ste
// let iconNames=  iconList.map(o=>o.textContent)
console.log(iconNames)

vue view design 图标选择器相关推荐

Vue中实现图标选择器
可选择elementUI中所有的图标和自定义导入的svg图标效果图: 首先要有这一节的基础:https://blog.csdn.net/qq_40323256/article/details/116 ...
View Design 全系产品升级至 Vue 3，并发布 View UI Plus 正式版
品牌升级我们可能是最后一个升级到 Vue.js 3 的组件库,不过该来的早晚会来. 作为国内最早一批的 Vue.js 组件库,View UI(即 iView)来到了它的第 6 年.这 6 年中,我们 ...
ant-design-vue vue2图标选择器
基于vue2和ant-design-vue封装的一个图标选择器 1.效果图 2.代码 iconPicker.vue <template><div><a-popover:t ...
小小图标功能大，10个最佳Material Design 图标资源你不可错过
Material design至发布以来,已然形成了其鲜明的设计风格,并渐渐成为统一 Android Mobile.Android Tablet.Desktop Chrome 等全平台设计语言规范.基 ...
ant design vue 树形控件_官宣！vue.ant.design 低调上线
点击右上方,关注开源中国OSC头条号,获取最新技术资讯官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design. 至此,Ant Design 已经全面覆盖了 Reac ...
官宣！vue.ant.design 低调上线
官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design. 至此,Ant Design 已经全面覆盖了 React.Angular.Vue 三大前端框架,向着世界第一好 ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...
vue多html标签,Vue实现多标签选择器
本文实例为大家分享了vue实现多标签选择器展示的具体代码,供大家参考,具体内容如下实现效果实现代码 document .not-active { display: inline-block; fo ...
如何修改vue的网页图标
今天在写vue项目时碰到的问题是怎么修改vue的网页图标,如图所示: ![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/43 ...

vue view design 图标选择器

vue view design 图标选择器相关推荐

最新文章

热门文章