THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

102 lines
2.4 KiB

  1. <template>
  2. <div class="icons-container">
  3. <aside>
  4. <a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
  5. </a>
  6. </aside>
  7. <el-tabs type="border-card">
  8. <el-tab-pane label="Icons">
  9. <div class="grid">
  10. <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
  11. <el-tooltip placement="top">
  12. <div slot="content">
  13. {{ generateIconCode(item) }}
  14. </div>
  15. <div class="icon-item">
  16. <svg-icon :icon-class="item" class-name="disabled" />
  17. <span>{{ item }}</span>
  18. </div>
  19. </el-tooltip>
  20. </div>
  21. </div>
  22. </el-tab-pane>
  23. <el-tab-pane label="Element-UI Icons">
  24. <div class="grid">
  25. <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
  26. <el-tooltip placement="top">
  27. <div slot="content">
  28. {{ generateElementIconCode(item) }}
  29. </div>
  30. <div class="icon-item">
  31. <i :class="'el-icon-' + item" />
  32. <span>{{ item }}</span>
  33. </div>
  34. </el-tooltip>
  35. </div>
  36. </div>
  37. </el-tab-pane>
  38. </el-tabs>
  39. </div>
  40. </template>
  41. <script>
  42. import clipboard from '@/utils/clipboard'
  43. import svgIcons from './svg-icons'
  44. import elementIcons from './element-icons'
  45. export default {
  46. name: 'Icons',
  47. data() {
  48. return {
  49. svgIcons,
  50. elementIcons
  51. }
  52. },
  53. methods: {
  54. generateIconCode(symbol) {
  55. return `<svg-icon icon-class="${symbol}" />`
  56. },
  57. generateElementIconCode(symbol) {
  58. return `<i class="el-icon-${symbol}" />`
  59. },
  60. handleClipboard(text, event) {
  61. clipboard(text, event)
  62. }
  63. }
  64. }
  65. </script>
  66. <style lang="scss" scoped>
  67. .icons-container {
  68. margin: 10px 20px 0;
  69. overflow: hidden;
  70. .grid {
  71. position: relative;
  72. display: grid;
  73. grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  74. }
  75. .icon-item {
  76. margin: 20px;
  77. height: 85px;
  78. text-align: center;
  79. width: 100px;
  80. float: left;
  81. font-size: 30px;
  82. color: #24292e;
  83. cursor: pointer;
  84. }
  85. span {
  86. display: block;
  87. font-size: 16px;
  88. margin-top: 10px;
  89. }
  90. .disabled {
  91. pointer-events: none;
  92. }
  93. }
  94. </style>