Newer
Older
KaiFengPC / src / components / IconSelect / index.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <div class="icon-body">
  3. <el-input
  4. v-model="iconName"
  5. style="position: relative;"
  6. clearable
  7. placeholder="请输入图标名称"
  8. @clear="filterIcons"
  9. @input="filterIcons"
  10. >
  11. <template #suffix><i class="el-icon-search el-input__icon" /></template>
  12. </el-input>
  13. <div class="icon-list">
  14. <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
  15. <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
  16. <span>{{ item }}</span>
  17. </div>
  18. </div>
  19. </div>
  20. </template>
  21.  
  22. <script setup>
  23. import icons from './requireIcons'
  24.  
  25. const iconName = ref('');
  26. const iconList = ref(icons);
  27. const emit = defineEmits(['selected']);
  28.  
  29. function filterIcons() {
  30. iconList.value = icons
  31. if (iconName.value) {
  32. iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
  33. }
  34. }
  35.  
  36. function selectedIcon(name) {
  37. emit('selected', name)
  38. document.body.click()
  39. }
  40.  
  41. function reset() {
  42. iconName.value = ''
  43. iconList.value = icons
  44. }
  45.  
  46. defineExpose({
  47. reset
  48. })
  49. </script>
  50.  
  51. <style lang='scss' scoped>
  52. .icon-body {
  53. width: 100%;
  54. padding: 10px;
  55. .icon-list {
  56. height: 200px;
  57. overflow-y: scroll;
  58. div {
  59. height: 30px;
  60. line-height: 30px;
  61. margin-bottom: -5px;
  62. cursor: pointer;
  63. width: 33%;
  64. float: left;
  65. }
  66. span {
  67. display: inline-block;
  68. vertical-align: -0.15em;
  69. fill: currentColor;
  70. overflow: hidden;
  71. }
  72. }
  73. }
  74. </style>