From 3686f45a6a3e6e9cf708bf6187ac21671dbca44a Mon Sep 17 00:00:00 2001
From: hxr <1490493387@qq.com>
Date: Tue, 20 Feb 2024 00:06:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=E4=BB=A3=E7=A0=81=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconSelect/index.vue | 194 ++++++++++++----------------
 1 file changed, 81 insertions(+), 113 deletions(-)

diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 8b26e7c5..c9bc4e09 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,3 +1,61 @@
+<template>
+  <div ref="iconSelectRef" :style="'width:' + width" class="relative">
+    <el-input
+      v-model="inputValue"
+      readonly
+      placeholder="点击选择图标"
+      @click="visible = !visible"
+    >
+      <template #prepend>
+        <svg-icon :icon-class="inputValue" />
+      </template>
+    </el-input>
+
+    <el-popover
+      :visible="visible"
+      placement="bottom-end"
+      trigger="click"
+      :width="width"
+    >
+      <template #reference>
+        <div
+          class="cursor-pointer text-[#999] absolute-tr height-[32px] leading-[32px] px-1"
+          @click="visible = !visible"
+        >
+          <i-ep-caret-top v-show="visible" />
+          <i-ep-caret-bottom v-show="!visible" />
+        </div>
+      </template>
+
+      <!-- 下拉选择弹窗 -->
+      <div ref="iconSelectDialogRef">
+        <el-input
+          v-model="filterValue"
+          placeholder="搜索图标"
+          clearable
+          @input="handleFilter"
+        />
+        <el-divider border-style="dashed" />
+
+        <el-scrollbar height="300px">
+          <ul class="flex flex-wrap">
+            <li
+              v-for="(iconName, index) in filterIconNames"
+              :key="index"
+              class="p-2 border border-solid border-gray-300 cursor-pointer hover:border-color-[var(--el-color-primary)] hover:text-[var(--el-color-primary)] hover:scale-110 hover:transition-all mt-1 ml-1"
+              @click="handleSelect(iconName)"
+            >
+              <el-tooltip :content="iconName" placement="bottom" effect="light">
+                <svg-icon :icon-class="iconName" />
+              </el-tooltip>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
 <script setup lang="ts">
 const props = defineProps({
   modelValue: {
@@ -5,10 +63,16 @@ const props = defineProps({
     require: false,
     default: "",
   },
+  width: {
+    type: String,
+    require: false,
+    default: "500px",
+  },
 });
 
 const emit = defineEmits(["update:modelValue"]);
 const inputValue = toRef(props, "modelValue");
+const width = toRef(props, "width");
 
 const visible = ref(false); // 弹窗显示状态
 
@@ -17,19 +81,8 @@ const allIconNames: string[] = []; // 所有的图标名称集合
 const filterValue = ref(""); // 筛选的值
 const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
 
-const iconSelectorRef = ref();
-const iconSelectorDialogRef = ref();
-/**
- * icon 加载
- */
-function loadIcons() {
-  const icons = import.meta.glob("../../assets/icons/*.svg");
-  for (const icon in icons) {
-    const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
-    allIconNames.push(iconName);
-  }
-  filterIconNames.value = allIconNames;
-}
+const iconSelectRef = ref();
+const iconSelectDialogRef = ref();
 
 /**
  * icon 筛选
@@ -55,110 +108,25 @@ function handleSelect(iconName: string) {
 /**
  * 点击容器外的区域关闭弹窗 VueUse onClickOutside
  */
-onClickOutside(iconSelectorRef, () => (visible.value = false), {
-  ignore: [iconSelectorDialogRef],
+onClickOutside(iconSelectRef, () => (visible.value = false), {
+  ignore: [iconSelectDialogRef],
 });
 
+/**
+ * icon 加载
+ */
+function loadIcons() {
+  const icons = import.meta.glob("../../assets/icons/*.svg");
+  for (const icon in icons) {
+    const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
+    allIconNames.push(iconName);
+  }
+  filterIconNames.value = allIconNames;
+}
+
 onMounted(() => {
   loadIcons();
 });
 </script>
 
-<template>
-  <div ref="iconSelectorRef" class="iconselect-container">
-    <el-input
-      v-model="inputValue"
-      readonly
-      placeholder="点击选择图标"
-      @click="visible = !visible"
-    >
-      <template #prepend>
-        <svg-icon :icon-class="inputValue" />
-      </template>
-    </el-input>
-
-    <el-popover
-      shadow="none"
-      :visible="visible"
-      placement="bottom-end"
-      trigger="click"
-      width="400"
-    >
-      <template #reference>
-        <div
-          class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"
-          @click="visible = !visible"
-        >
-          <i-ep-caret-top v-show="visible" />
-          <i-ep-caret-bottom v-show="!visible" />
-        </div>
-      </template>
-
-      <!-- 下拉选择弹窗 -->
-      <div ref="iconSelectorDialogRef">
-        <el-input
-          v-model="filterValue"
-          class="p-2"
-          placeholder="搜索图标"
-          clearable
-          @input="handleFilter"
-        />
-        <el-divider border-style="dashed" />
-
-        <el-scrollbar height="300px">
-          <ul class="icon-list">
-            <li
-              v-for="(iconName, index) in filterIconNames"
-              :key="index"
-              class="icon-item"
-              @click="handleSelect(iconName)"
-            >
-              <el-tooltip :content="iconName" placement="bottom" effect="light">
-                <svg-icon
-                  color="var(--el-text-color-regular)"
-                  :icon-class="iconName"
-                />
-              </el-tooltip>
-            </li>
-          </ul>
-        </el-scrollbar>
-      </div>
-    </el-popover>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.el-divider--horizontal {
-  margin: 10px auto !important;
-}
-
-.iconselect-container {
-  position: relative;
-  width: 400px;
-}
-
-.icon-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 10px;
-  margin-top: 10px;
-
-  .icon-item {
-    display: flex;
-    flex-direction: column;
-    place-items: center center;
-    width: 10%;
-    padding: 5px;
-    margin: 0 10px 10px 0;
-    cursor: pointer;
-    border: 1px solid #ccc;
-
-    &:hover {
-      color: var(--el-color-primary);
-      border-color: var(--el-color-primary);
-      transition: all 0.2s;
-      transform: scaleX(1.1);
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>