<template> <el-dialog :visible.sync="visible" :title="'Icons'"> <div style="background: #efefef; max-height: 500px; overflow: hidden scroll;"> <el-row :gutter="10"> <el-col v-for="icon in icons" :key="icon" :span="3" class="col-hover" style="padding: 8px; text-align: center; cursor: pointer;" @click.native="handleCopy(icon)"> <svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"> <use v-bind:xlink:href="`#${icon}`"></use> </svg> </el-col> </el-row> </div> <div slot="footer"> <el-button @click="close()">Close</el-button> </div> </el-dialog> </template> <script> export default { name: 'IconsDialog', data() { return { icons: [], visible: false } }, methods: { init() { this.loadIcons() this.visible = true }, loadIcons() { this.icons = [ 'icon-check-circle', 'icon-CI', 'icon-Dollar', 'icon-compass', 'icon-close-circle', 'icon-frown', 'icon-info-circle', 'icon-left-circle', 'icon-down-circle', 'icon-EURO', 'icon-copyright', 'icon-minus-circle', 'icon-meh', 'icon-plus-circle', 'icon-play-circle', 'icon-question-circle', 'icon-Pound', 'icon-right-circle', 'icon-smile', 'icon-trademark', 'icon-time-circle', 'icon-timeout', 'icon-earth', 'icon-YUAN', 'icon-up-circle', 'icon-warning-circle', 'icon-sync', 'icon-transaction', 'icon-undo', 'icon-redo', 'icon-reload', 'icon-reloadtime', 'icon-message', 'icon-dashboard', 'icon-issuesclose', 'icon-poweroff', 'icon-logout', 'icon-login', 'icon-piechart', 'icon-setting', 'icon-eye', 'icon-location', 'icon-edit-square', 'icon-export', 'icon-save', 'icon-Import', 'icon-appstore', 'icon-close-square', 'icon-down-square', 'icon-layout', 'icon-left-square', 'icon-play-square', 'icon-control', 'icon-codelibrary', 'icon-detail', 'icon-minus-square', 'icon-plus-square', 'icon-right-square', 'icon-project', 'icon-wallet', 'icon-up-square', 'icon-calculator', 'icon-interation', 'icon-check-square', 'icon-border', 'icon-border-outer', 'icon-border-top', 'icon-border-bottom', 'icon-border-left', 'icon-border-right', 'icon-border-inner', 'icon-border-verticle', 'icon-border-horizontal', 'icon-radius-bottomleft', 'icon-radius-bottomright', 'icon-radius-upleft', 'icon-radius-upright', 'icon-radius-setting', 'icon-adduser', 'icon-deleteteam', 'icon-deleteuser', 'icon-addteam', 'icon-user', 'icon-team', 'icon-areachart', 'icon-linechart', 'icon-barchart', 'icon-pointmap', 'icon-container', 'icon-database', 'icon-sever', 'icon-mobile', 'icon-tablet', 'icon-redenvelope', 'icon-book', 'icon-filedone', 'icon-reconciliation', 'icon-file-exception', 'icon-filesync', 'icon-filesearch', 'icon-solution', 'icon-fileprotect', 'icon-file-add', 'icon-file-excel', 'icon-file-exclamation', 'icon-file-pdf', 'icon-file-image', 'icon-file-markdown', 'icon-file-unknown', 'icon-file-ppt', 'icon-file-word', 'icon-file', 'icon-file-zip', 'icon-file-text', 'icon-file-copy', 'icon-snippets', 'icon-audit', 'icon-diff', 'icon-Batchfolding', 'icon-securityscan', 'icon-propertysafety', 'icon-safetycertificate', 'icon-insurance', 'icon-alert', 'icon-delete', 'icon-hourglass', 'icon-bulb', 'icon-experiment', 'icon-bell', 'icon-trophy', 'icon-rest', 'icon-USB', 'icon-skin', 'icon-home', 'icon-bank', 'icon-filter', 'icon-funnelplot', 'icon-like', 'icon-unlike', 'icon-unlock', 'icon-lock', 'icon-customerservice', 'icon-flag', 'icon-moneycollect', 'icon-medicinebox', 'icon-shop', 'icon-rocket', 'icon-shopping', 'icon-folder', 'icon-folder-open', 'icon-folder-add', 'icon-deploymentunit', 'icon-accountbook', 'icon-contacts', 'icon-carryout', 'icon-calendar-check', 'icon-calendar', 'icon-scan', 'icon-select', 'icon-boxplot', 'icon-build', 'icon-sliders', 'icon-laptop', 'icon-barcode', 'icon-camera', 'icon-cluster', 'icon-gateway', 'icon-car', 'icon-printer', 'icon-read', 'icon-cloud-server', 'icon-cloud-upload', 'icon-cloud', 'icon-cloud-download', 'icon-cloud-sync', 'icon-video', 'icon-notification', 'icon-sound', 'icon-radarchart', 'icon-qrcode', 'icon-fund', 'icon-image', 'icon-mail', 'icon-table', 'icon-idcard', 'icon-creditcard', 'icon-heart', 'icon-block', 'icon-error', 'icon-star', 'icon-gold', 'icon-heatmap', 'icon-wifi', 'icon-attachment', 'icon-edit', 'icon-key', 'icon-api', 'icon-disconnect', 'icon-highlight', 'icon-monitor', 'icon-link', 'icon-man', 'icon-percentage', 'icon-search', 'icon-pushpin', 'icon-phone', 'icon-shake', 'icon-tag', 'icon-wrench', 'icon-woman', 'icon-tags', 'icon-scissor', 'icon-mr', 'icon-share', 'icon-branches', 'icon-fork', 'icon-shrink', 'icon-arrawsalt', 'icon-verticalright', 'icon-verticalleft', 'icon-right', 'icon-left', 'icon-up', 'icon-down', 'icon-fullscreen', 'icon-fullscreen-exit', 'icon-doubleleft', 'icon-doubleright', 'icon-arrowright', 'icon-arrowup', 'icon-arrowleft', 'icon-arrowdown', 'icon-upload', 'icon-colum-height', 'icon-vertical-align-botto', 'icon-vertical-align-middl', 'icon-totop', 'icon-vertical-align-top', 'icon-download', 'icon-sort-descending', 'icon-sort-ascending', 'icon-fall', 'icon-swap', 'icon-stock', 'icon-rise', 'icon-indent', 'icon-outdent', 'icon-menu', 'icon-unorderedlist', 'icon-orderedlist', 'icon-align-right', 'icon-align-center', 'icon-align-left', 'icon-pic-center', 'icon-pic-right', 'icon-pic-left', 'icon-bold', 'icon-font-colors', 'icon-exclaimination', 'icon-font-size', 'icon-infomation', 'icon-line-height', 'icon-strikethrough', 'icon-underline', 'icon-number', 'icon-italic', 'icon-code', 'icon-column-width', 'icon-check', 'icon-ellipsis', 'icon-dash', 'icon-close', 'icon-enter', 'icon-line', 'icon-minus', 'icon-question', 'icon-plus', 'icon-rollback', 'icon-small-dash', 'icon-pause', 'icon-bg-colors', 'icon-crown', 'icon-drag', 'icon-desktop', 'icon-gift', 'icon-stop', 'icon-fire', 'icon-thunderbolt', 'icon-check-circle-fill', 'icon-left-circle-fill', 'icon-down-circle-fill', 'icon-minus-circle-fill', 'icon-close-circle-fill', 'icon-info-circle-fill', 'icon-up-circle-fill', 'icon-right-circle-fill', 'icon-plus-circle-fill', 'icon-question-circle-fill', 'icon-EURO-circle-fill', 'icon-frown-fill', 'icon-copyright-circle-fil', 'icon-CI-circle-fill', 'icon-compass-fill', 'icon-Dollar-circle-fill', 'icon-poweroff-circle-fill', 'icon-meh-fill', 'icon-play-circle-fill', 'icon-Pound-circle-fill', 'icon-smile-fill', 'icon-stop-fill', 'icon-warning-circle-fill', 'icon-time-circle-fill', 'icon-trademark-circle-fil', 'icon-YUAN-circle-fill', 'icon-heart-fill', 'icon-piechart-circle-fil', 'icon-dashboard-fill', 'icon-message-fill', 'icon-check-square-fill', 'icon-down-square-fill', 'icon-minus-square-fill', 'icon-close-square-fill', 'icon-codelibrary-fill', 'icon-left-square-fill', 'icon-play-square-fill', 'icon-up-square-fill', 'icon-right-square-fill', 'icon-plus-square-fill', 'icon-accountbook-fill', 'icon-carryout-fill', 'icon-calendar-fill', 'icon-calculator-fill', 'icon-interation-fill', 'icon-project-fill', 'icon-detail-fill', 'icon-save-fill', 'icon-wallet-fill', 'icon-control-fill', 'icon-layout-fill', 'icon-appstore-fill', 'icon-mobile-fill', 'icon-tablet-fill', 'icon-book-fill', 'icon-redenvelope-fill', 'icon-safetycertificate-f', 'icon-propertysafety-fill', 'icon-insurance-fill', 'icon-securityscan-fill', 'icon-file-exclamation-fil', 'icon-file-add-fill', 'icon-file-fill', 'icon-file-excel-fill', 'icon-file-markdown-fill', 'icon-file-text-fill', 'icon-file-ppt-fill', 'icon-file-unknown-fill', 'icon-file-word-fill', 'icon-file-zip-fill', 'icon-file-pdf-fill', 'icon-file-image-fill', 'icon-diff-fill', 'icon-file-copy-fill', 'icon-snippets-fill', 'icon-batchfolding-fill', 'icon-reconciliation-fill', 'icon-folder-add-fill', 'icon-folder-fill', 'icon-folder-open-fill', 'icon-database-fill', 'icon-container-fill', 'icon-sever-fill', 'icon-calendar-check-fill', 'icon-image-fill', 'icon-idcard-fill', 'icon-creditcard-fill', 'icon-fund-fill', 'icon-read-fill', 'icon-contacts-fill', 'icon-delete-fill', 'icon-notification-fill', 'icon-flag-fill', 'icon-moneycollect-fill', 'icon-medicinebox-fill', 'icon-rest-fill', 'icon-shopping-fill', 'icon-skin-fill', 'icon-video-fill', 'icon-sound-fill', 'icon-bulb-fill', 'icon-bell-fill', 'icon-filter-fill', 'icon-fire-fill', 'icon-funnelplot-fill', 'icon-gift-fill', 'icon-hourglass-fill', 'icon-home-fill', 'icon-trophy-fill', 'icon-location-fill', 'icon-cloud-fill', 'icon-customerservice-fill', 'icon-experiment-fill', 'icon-eye-fill', 'icon-like-fill', 'icon-lock-fill', 'icon-unlike-fill', 'icon-star-fill', 'icon-unlock-fill', 'icon-alert-fill', 'icon-api-fill', 'icon-highlight-fill', 'icon-phone-fill', 'icon-edit-fill', 'icon-pushpin-fill', 'icon-rocket-fill', 'icon-thunderbolt-fill', 'icon-tag-fill', 'icon-wrench-fill', 'icon-tags-fill', 'icon-bank-fill', 'icon-camera-fill', 'icon-error-fill', 'icon-crown-fill', 'icon-mail-fill', 'icon-car-fill', 'icon-printer-fill', 'icon-shop-fill', 'icon-setting-fill', 'icon-USB-fill', 'icon-golden-fill', 'icon-build-fill', 'icon-boxplot-fill', 'icon-sliders-fill', 'icon-alibaba', 'icon-alibabacloud', 'icon-antdesign', 'icon-ant-cloud', 'icon-behance', 'icon-googleplus', 'icon-medium', 'icon-google', 'icon-IE', 'icon-amazon', 'icon-slack', 'icon-alipay', 'icon-taobao', 'icon-zhihu', 'icon-HTML', 'icon-linkedin', 'icon-yahoo', 'icon-facebook', 'icon-skype', 'icon-CodeSandbox', 'icon-chrome', 'icon-codepen', 'icon-aliwangwang', 'icon-apple', 'icon-android', 'icon-sketch', 'icon-Gitlab', 'icon-dribbble', 'icon-instagram', 'icon-reddit', 'icon-windows', 'icon-yuque', 'icon-Youtube', 'icon-Gitlab-fill', 'icon-dropbox', 'icon-dingtalk', 'icon-android-fill', 'icon-apple-fill', 'icon-HTML-fill', 'icon-windows-fill', 'icon-QQ', 'icon-twitter', 'icon-skype-fill', 'icon-weibo', 'icon-yuque-fill', 'icon-Youtube-fill', 'icon-yahoo-fill', 'icon-wechat-fill', 'icon-chrome-fill', 'icon-alipay-circle-fill', 'icon-aliwangwang-fill', 'icon-behance-circle-fill', 'icon-amazon-circle-fill', 'icon-codepen-circle-fill', 'icon-CodeSandbox-circle-f', 'icon-dropbox-circle-fill', 'icon-github-fill', 'icon-dribbble-circle-fill', 'icon-googleplus-circle-f', 'icon-medium-circle-fill', 'icon-QQ-circle-fill', 'icon-IE-circle-fill', 'icon-google-circle-fill', 'icon-dingtalk-circle-fill', 'icon-sketch-circle-fill', 'icon-slack-circle-fill', 'icon-twitter-circle-fill', 'icon-taobao-circle-fill', 'icon-weibo-circle-fill', 'icon-zhihu-circle-fill', 'icon-reddit-circle-fill', 'icon-alipay-square-fill', 'icon-dingtalk-square-fill', 'icon-CodeSandbox-square-f', 'icon-behance-square-fill', 'icon-amazon-square-fill', 'icon-codepen-square-fill', 'icon-dribbble-square-fill', 'icon-dropbox-square-fill', 'icon-facebook-fill', 'icon-googleplus-square-f', 'icon-google-square-fill', 'icon-instagram-fill', 'icon-IE-square-fill', 'icon-medium-square-fill', 'icon-linkedin-fill', 'icon-QQ-square-fill', 'icon-reddit-square-fill', 'icon-twitter-square-fill', 'icon-sketch-square-fill', 'icon-slack-square-fill', 'icon-taobao-square-fill', 'icon-weibo-square-fill', 'icon-zhihu-square-fill', 'icon-zoomout', 'icon-apartment', 'icon-audio', 'icon-audio-fill', 'icon-robot', 'icon-zoomin' ] }, handleCopy(v) { if (navigator.clipboard) { /** 如果支持剪切板api */ navigator.clipboard .writeText(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`) .then(() => { this.$message.success('已复制') }) } else { this.$message.info('请打开 Console 手动复制.') console.log(`<svg class="icon-svg aui-navbar__icon-menu" style="height: 24px; width: 24px;" aria-hidden="true"><use xlink:href="#${v}"></use></svg>`) } }, close() { this.visible = false this.$emit('destory-me') } } } </script> <style scoped> .col-hover:hover { background: #ddd; } </style>