封装组件IconSelect

1、IconSelect作用

// vite-plugin-svg-icons地址
https://github.com/vbenjs/vite-plugin-svg-icons

这部分组件主要是为了我们菜单之中进行icon选择的时候帮助我们渲染菜单的icon

2、封装组件IconSelect

🍎requireIcons.ts导入所有的icon

const icons: string[] = []
const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
for (const path in modules) {
  // 这里 p 是 string
  const p: string = path.split('assets/icons/svg/')[1].split('.svg')[0]
  icons.push(p)
}
export default icons

🍎IconSelect/index.vue中封装

<template>
  <div class="icon-body">
    <el-input
      v-model="iconName"
      class="icon-search"
      clearable
      placeholder="请输入图标名称"
      @clear="filterIcons"
      @input="filterIcons"
    >
      <template #suffix><i class="el-icon-search el-input__icon"/></template>
    </el-input>
    <div class="icon-list">
      <div class="list-container">
        <div v-for="(item, index) in iconList" 
        class="icon-item-wrapper" 
        :key="index" @click="selectedIcon(item)">
          <div :class="['icon-item', { active: activeIcon === item }]">
            <SvgIcon :name="item" class-name="icon" style="height: 25px;width: 16px;"/>
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import icons from './requireIcons'

const props = defineProps({
  activeIcon: {
    type: String
  }
})

const iconName = ref('')
const iconList = ref(icons)
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) {
  emit('selected', name)
  document.body.click()
}

function reset() {
  iconName.value = ''
  iconList.value = icons
}

defineExpose({
  reset
})
</script>

<style scoped>
  .icon-body {
  width: 100%;
  padding: 10px;
}
.icon-body .icon-search {
  position: relative;
  margin-bottom: 5px;
}
.icon-body .icon-list {
  height: 200px;
  overflow: auto;
}
.icon-body .icon-list .list-container {
  display: flex;
  flex-wrap: wrap;
}
.icon-body .icon-list .list-container .icon-item-wrapper {
  width: calc(100% / 3);
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  display: flex;
}
.icon-body .icon-list .list-container .icon-item-wrapper .icon-item {
  display: flex;
  max-width: 100%;
  height: 100%;
  padding: 0 5px;
}
.icon-body .icon-list .list-container .icon-item-wrapper .icon-item:hover {
  background: #ececec;
  border-radius: 5px;
}
.icon-body .icon-list .list-container .icon-item-wrapper .icon-item .icon {
  flex-shrink: 0;
}
.icon-body .icon-list .list-container .icon-item-wrapper .icon-item span {
  display: inline-block;
  vertical-align: -0.15em;
  fill: currentColor;
  padding-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-body .icon-list .list-container .icon-item-wrapper .icon-item.active {
  background: #ececec;
  border-radius: 5px;
}
</style>

3、使用

IconSelect主要用于我们菜单里面选择icon部分，效果

 <IconSelect 
   ref="iconSelectRef" 
   @selected="selected" 
  :active-icon="form.icon">
</IconSelect>


const iconSelectRef = ref(null);
/** 选择图标 */
function selected(name) {
 form.value.icon = name;
}