shuhi-ui/src/views/system/menu/components/icon-select.vue

<!-- 图标选择下拉框 -->
<template>
  <ele-icon-select
    clearable
    filterable="popper"
    :data="iconData"
    v-model="model"
    :placeholder="placeholder"
    :disabled="disabled"
    :popper-width="420"
    :popper-height="294"
    :grid-style="{ gridTemplateColumns: 'repeat(6, 1fr)' }"
    :item-style="{ height: '52px' }"
    :popper-options="{ strategy: 'fixed' }"
  >
    <template #icon="{ icon }">
      <el-icon>
        <component :is="icon" />
      </el-icon>
    </template>
  </ele-icon-select>
</template>

<script setup>
  import * as MenuIcons from '@/layout/menu-icons';

  defineOptions({ components: MenuIcons });

  defineProps({
    /** 是否禁用 */
    disabled: Boolean,
    /** 提示信息 */
    placeholder: {
      type: String,
      default: '请选择菜单图标'
    }
  });

  /** 选中的图标 */
  const model = defineModel({ type: String });

  const iconNames = Object.keys(MenuIcons);

  const iconData = [
    {
      title: '线框风格',
      icons: iconNames.filter((name) => !name.endsWith('Filled'))
    },
    {
      title: '实底风格',
      icons: iconNames.filter((name) => name.endsWith('Filled'))
    }
  ];
</script>