Vue3后台管理系统（十六）图标选择器

以你之姓@ 2024-03-26 13:44 75阅读 0赞

**目录**

一、场景效果

二、添加图标

三、封装组件

四、使用案例

--------------------

#### 一、场景效果 ####

![4f3f4c43d82149aba8f3ccda0641ba16.png][]

#### 二、添加图标 ####

**收集需要的图标集合，全部放到src/assets/icons文件夹中**

![2776c3b0bb0c4f88863eeac2e2bc222d.png][]

![c97dd8d63af34d59a15eb8ff1e0aaa1b.png][]

#### 三、封装组件 ####

在src/components文件夹下新建IconSelect文件夹，并在IconSelect文件夹下新建index.vue

<template>
      <div class="icon-select">
        <el-input
          v-model="iconName"
          clearable
          placeholder="请输入图标名称"
          @clear="filterIcons"
          @input="filterIcons"
        >
          <template #suffix><i class="el-icon-search el-input__icon" /></template>
        </el-input>
        <div class="icon-select__list">
          <div
            v-for="(item, index) in iconList"
            :key="index"
            @click="selectedIcon(item)"
          >
            <svg-icon
              color="#999"
              :icon-class="item"
              style="height: 30px; width: 16px; margin-right: 5px"
            />
            <span>{
       { item }}</span>
          </div>
        </div>
      </div>
    </template>
    
    <script setup lang="ts">
    import { ref } from 'vue';
    import SvgIcon from '@/components/SvgIcon/index.vue';
    
    const icons = [] as string[];
    const modules = import.meta.glob('../../assets/icons/*.svg');
    for (const path in modules) {
      const p = path.split('assets/icons/')[1].split('.svg')[0];
      icons.push(p);
    }
    const iconList = ref(icons);
    
    const iconName = ref('');
    
    const emit = defineEmits(['selected']);
    
    function filterIcons() {
      iconList.value = icons;
      if (iconName.value) {
        iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1);
      }
    }
    
    function selectedIcon(name: string) {
      emit('selected', name);
      document.body.click();
    }
    
    function reset() {
      iconName.value = '';
      iconList.value = icons;
    }
    
    defineExpose({
      reset
    });
    </script>
    
    <style lang="scss" scoped>
    .icon-select {
      width: 100%;
      padding: 10px;
    
      &__list {
        height: 200px;
        overflow-y: scroll;
    
        div {
          height: 30px;
          line-height: 30px;
          margin-bottom: -5px;
          cursor: pointer;
          width: 33%;
          float: left;
        }
    
        span {
          display: inline-block;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
      }
    }
    </style>

#### 四、使用案例 ####

<script setup lang="ts">
    import IconSelect from '@/components/IconSelect/index.vue'
    import {reactive, ref} from "vue";
    
    const state = reactive({
      icon: '',
    })
    
    function selected(name: string) {
      console.log(state.icon)
      state.icon = name;
    }
    
    </script>
    
    <template>
      <div>
        <icon-select @selected="selected"></icon-select>
      </div>
    </template>
    
    <style>
    
    </style>

![eabe594aceee41b098f83542fcf7e9ae.png][]

[4f3f4c43d82149aba8f3ccda0641ba16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1d0886421d314e8d8ce3a6b331311d51.png
[2776c3b0bb0c4f88863eeac2e2bc222d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6f343ab7aa554a16a75298df7ebaed4f.png
[c97dd8d63af34d59a15eb8ff1e0aaa1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/470c332c05c94cd0bdec61ff3ae4637f.png
[eabe594aceee41b098f83542fcf7e9ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2da0fa715374445b9f5e2ad770cfa95f.png