perf: 图标选择器逻辑优化

kailong321200875 · Jan 6, 2024 · c2dde25 · c2dde25
1 parent a926c56
commit c2dde25
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/IconPicker/src/IconPicker.vue b/src/components/IconPicker/src/IconPicker.vue
@@ -90,6 +90,11 @@ const popoverShow = () => {
 }
 
 const iconSelect = (icon: string) => {
+  // 如果是同一个icon则不做处理，则相当于点击了清空按钮
+  if (icon === unref(modelValue)) {
+    modelValue.value = ''
+    return
+  }
   modelValue.value = icon
 }
 
@@ -106,7 +111,7 @@ const inputClear = () => {
 
 <template>
   <div :class="prefixCls" class="flex justify-center items-center box">
-    <ElInput disabled v-model="modelValue" />
+    <ElInput disabled v-model="modelValue" clearable />
     <ElPopover
       placement="bottom"
       trigger="click"
@@ -144,8 +149,10 @@ const inputClear = () => {
                     icon === modelValue ? 'var(--el-color-primary)' : 'var(--el-border-color)'
                   }`,
                   boxSizing: 'border-box',
-                  margin: '2px'
+                  margin: '2px',
+                  transition: 'all 0.3s'
                 }"
+                class="hover:border-color-[var(--el-color-primary)]!"
                 @click="iconSelect(icon)"
               >
                 <Icon

diff --git a/src/views/Components/IconPicker.vue b/src/views/Components/IconPicker.vue
@@ -6,7 +6,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 
 const { t } = useI18n()
 
-const currentIcon = ref('tdesign:book-open')
+const currentIcon = ref('')
 </script>
 
 <template>