提交代码

src/components/MyComponents/ChooseIcon/index.vue

@@ -0,0 +1,88 @@
+<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>