feat: 重构图标选择器组件

Former-commit-id: c47cd1e04c56da514d3649c36a8d15ce890078f4

src/components/IconSelect/index.vue

@@ -3,24 +3,57 @@ const props = defineProps({
   modelValue: {
     type: String,
     require: false
+  },
+  /**
+   * 选择器宽度
+   */
+  width: {
+    type: String,
+    require: false,
+    default: '400px'
   }
 });
 
 const emit = defineEmits(['update:modelValue']);
 const visible = ref(false);
 const inputValue = toRef(props, 'modelValue');
-const iconList = ref<string[]>([]);
+const width = toRef(props, 'width');
+const iconNames: string[] = [];
+const filterIconNames = ref<string[]>([]);
 
 const filterValue = ref('');
 
-const icon = ref('perm');
-
 function loadIcons() {
-  const modules = import.meta.glob('../../assets/icons/*.svg');
-  for (const path in modules) {
-    const icon = path.split('assets/icons/')[1].split('.svg')[0];
-    iconList.value.push(icon);
+  const icons = import.meta.glob('../../assets/icons/*.svg');
+  for (const icon in icons) {
+    const iconName = icon.split('assets/icons/')[1].split('.svg')[0];
+    iconNames.push(iconName);
   }
+  filterIconNames.value = iconNames;
+}
+
+/**
+ * 筛选图标
+ */
+function handleIconFilter() {
+  console.log('筛选关键字', filterValue.value);
+  if (filterValue.value) {
+    filterIconNames.value = filterIconNames.value.filter(iconName =>
+      iconName.includes(filterValue.value)
+    );
+  } else {
+    filterIconNames.value = iconNames;
+  }
+}
+
+/**
+ * 选择图标
+ *
+ * @param iconName 选择的图标名称
+ */
+function onIconSelect(iconName: string) {
+  emit('update:modelValue', iconName);
+  visible.value = false;
 }
 
 onMounted(() => {
@@ -29,9 +62,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="w-[400px] relative">
-    <el-input v-model="inputValue" readonly>
-      <template #prepend> <svg-icon :iconName="icon"></svg-icon> </template>
+  <div class="relative" :style="{ width: width }">
+    <el-input
+      v-model="inputValue"
+      readonly
+      @click="visible = !visible"
+      placeholder="点击选择图标"
+    >
+      <template #prepend>
+        <svg-icon :iconName="inputValue"></svg-icon>
+      </template>
     </el-input>
 
     <el-popover
@@ -39,6 +79,7 @@ onMounted(() => {
       :visible="visible"
       placement="bottom-end"
       trigger="click"
+      :width="400"
     >
       <template #reference>
         <div
@@ -56,14 +97,21 @@ onMounted(() => {
         v-model="filterValue"
         placeholder="搜索图标"
         clearable
+        @input="handleIconFilter"
       />
       <el-divider border-style="dashed" />
 
       <el-scrollbar height="300px">
         <ul class="icon-list">
-          <li class="icon-item" v-for="(item, index) in iconList" :key="index">
-            <svg-icon color="#999" :icon-name="item" />
-            <span>{{ item }}</span>
+          <li
+            class="icon-item"
+            v-for="(iconName, index) in filterIconNames"
+            :key="index"
+            @click="onIconSelect(iconName)"
+          >
+            <el-tooltip :content="iconName" placement="bottom" effect="light">
+              <svg-icon color="#999" :icon-name="iconName" />
+            </el-tooltip>
           </li>
         </ul>
       </el-scrollbar>
@@ -72,13 +120,30 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
+.el-divider--horizontal {
+  margin: 10px auto !important;
+}
 .icon-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 10px;
+  margin-top: 10px;
+
   .icon-item {
+    cursor: pointer;
+    width: 10%;
+    margin: 0 10px 10px 0;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    align-items: center;
+    border: 1px solid #ccc;
     &:hover {
       border-color: var(--el-color-primary);
       color: var(--el-color-primary);
-      transition: all 0.4s;
-      transform: scaleX(1.05);
+      transition: all 0.2s;
+      transform: scaleX(1.1);
     }
   }
 }