sgxt_web/src/components/MyComponents/ChooseIcon/index.vue

<template>
  <!--选择图标-->
  <div class="form-item-box choose-icon-zj" :style="{ width: width }">
    <el-autocomplete
      v-bind="$attrs"
      v-model="modelValue"
      :fetch-suggestions="querySearch"
      popper-class="choose-icon-zj-autocomplete"
      :placeholder="placeholder"
      @change="onInput"
      @select="handleSelect"
    >
      <template #prefix>
        <SvgIcon :icon="modelValue"></SvgIcon>
      </template>
      <template #default="{ item }">
        <SvgIcon :icon="item.link"></SvgIcon>
        <div class="value">{{ item.value }}</div>
      </template>
    </el-autocomplete>
    <!-- <el-icon class="errorIcon">
      <circle-close-filled />
    </el-icon>
    <el-icon class="checkIcon">
      <circle-check-filled />
    </el-icon> -->
  </div>
</template>

<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, defineExpose, onMounted } from "vue";
const props = defineProps({
  placeholder: {
    default: "请输入图标名称",
    type: String
  },
  modelValue: {
    default: "",
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});
const links = ref([]);

const querySearch = (queryString, cb) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value;
  cb(results);
};
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

const handleSelect = (item) => {
  emits("update:modelValue", item.value);
};

const handleIconClick = (ev) => {};

const loadAll = () => {
  const svgRequire = require.context("@/icons/svg", false, /\.svg$/);
  const re = svgRequire.keys().map((svgIcon) => {
    const iconName = svgIcon.split("/")[1];
    const prefixIconName = iconName.split(".")[0];
    return { value: prefixIconName, link: prefixIconName };
  });
  return re;
};
const iconListShow = ref(false);
const showIconList = () => {
  iconListShow.value = true;
};

onMounted(() => {
  links.value = loadAll();
});

const emits = defineEmits(["update:modelValue"]);
const onInput = (e) => {
  emits("update:modelValue", e);
};
</script>

<style lang="scss" scoped>
</style>