fix: 修复图标获取失败

peng-xiao-shuai · Apr 29, 2024 · a1d7b54 · a1d7b54
1 parent d102d8a
commit a1d7b54
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/src/components/icon-select/index.vue b/src/components/icon-select/index.vue
@@ -78,22 +78,25 @@ watchEffect(() => {
 const getIconFonts = async () => {
   axios.get(defaultData.iconFontUrl).then((res) => {
     // 获取所有的 字体图标
-    cacheIconFont = [...res.data.data.matchAll(/([\w|\-|\d]+):before/g)].map(
+    cacheIconFont = [...res.data.matchAll(/([\w|\-|\d]+):before/g)].map(
       (item: string[]) => ({
         name: item[1],
-      })
+      }),
     )
     options.value = [...cacheIconFont]
     loading.value = false
   })
 }
 
 const getElementIcon = async () => {
-  import('@element-plus/icons-vue').then((res) => {
+  type Icon = {
+    [key: string]: Component
+  }
+  import('@element-plus/icons-vue').then((res: Icon) => {
     for (const i in res) {
       cacheIconSvg.push({
-        name: (res[i] as Component).name!,
-        component: res[i] as Component,
+        name: res[i].name!,
+        component: res[i],
       })
     }
     options.value = [...cacheIconSvg]
@@ -105,6 +108,8 @@ const getElementIcon = async () => {
 watch(
   () => props.type,
   (val) => {
+    console.log(val)
+
     if (val == 'icon-font' || !val) {
       getIconFonts()
     } else {
@@ -113,7 +118,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 )
 
 // 搜索
@@ -132,7 +137,7 @@ const remoteMethod = (str: string) => {
   }
 }
 .icons {
-  padding: 5px 10px;
+  padding: 0 10px;
   display: grid;
   grid-row-gap: 5px;
   grid-column-gap: 5px;
@@ -182,3 +187,14 @@ const remoteMethod = (str: string) => {
   }
 }
 </style>
+
+<style lang="scss">
+.el-select-dropdown {
+  .el-scrollbar {
+    padding: 10px 0;
+  }
+  .el-select-dropdown__list {
+    padding: 0;
+  }
+}
+</style>
diff --git a/src/views/modules/icons/index.vue b/src/views/modules/icons/index.vue
@@ -53,8 +53,8 @@ const iconSvg: { [s: string]: Component } = shallowReactive({})
 const getIconFonts = async () => {
   axios.get(defaultData.iconFontUrl).then((res) => {
     // 获取所有的 字体图标
-    iconFont.value = [...res.data.data.matchAll(/([\w|\-|\d]+):before/g)].map(
-      (item: string[]) => item[1]
+    iconFont.value = [...res.data.matchAll(/([\w|\-|\d]+):before/g)].map(
+      (item: string[]) => item[1],
     )
   })
 }