From 93c291a66892403901dfa3f73eabda139945f360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Thu, 28 Apr 2022 19:27:05 +0800
Subject: [PATCH] =?UTF-8?q?svg=E5=9B=BE=E6=A0=87=E6=94=B9=E7=94=A8resolveC?=
 =?UTF-8?q?omponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SvgIcon/index.vue | 56 ++++++++++++++++----------------
 src/components/TopNav/index.vue  |  9 +++--
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 43ace34..b02a5a3 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,13 +1,9 @@
-<template>
-  <svg :class="svgClass" aria-hidden="true" v-if="iconType == 0">
-    <use :xlink:href="iconName" :fill="color" />
-  </svg>
-  <el-icon v-else><component :is="iconName" /></el-icon>
-</template>
-
 <script>
+import { h, resolveComponent } from 'vue'
+
 export default defineComponent({
   props: {
+    // svg 图标组件名字
     name: {
       type: String,
       required: true,
@@ -17,33 +13,37 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    // svg 颜色
     color: {
       type: String,
       default: '',
     },
   },
   setup(props) {
-    return {
-      iconType: computed(() => {
-        if (props.name.startsWith('ele')) {
-          return 1
-        } else {
-          return 0
-        }
-      }),
-      iconName: computed(() => {
-        if (props.name?.startsWith('ele-')) {
-          return props.name.replace('ele-', '')
-        } else {
-          return `#icon-${props.name}`
-        }
-      }),
-      svgClass: computed(() => {
-        if (props.className) {
-          return `svg-icon ${props.className}`
-        }
-        return 'svg-icon'
-      }),
+    if (props.name?.startsWith('ele')) {
+      return () =>
+        h(
+          'i',
+          {
+            class: 'el-icon',
+          },
+          [h(resolveComponent(props.name.replace('ele-', '')))],
+        )
+    } else {
+      return () =>
+        h(
+          'svg',
+          {
+            name: props.name,
+            'aria-hidden': true,
+            style: `color: ${props.color}`,
+            class: 'svg-icon',
+          },
+          h('use', {
+            'xlink:href': `#icon-${props.name}`,
+            fill: `${props.color}`,
+          }),
+        )
     }
   },
 })
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index d090a57..435fd1d 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -1,14 +1,14 @@
 <template>
   <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
+      <el-menu-item :style="{ '--theme': theme }" :index="item.path" :key="index" v-if="index < visibleNumber">
         <svg-icon :name="item.meta.icon" />
         &nbsp;{{ item.meta.title }}
       </el-menu-item>
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-sub-menu :style="{ '--theme': theme }" index="more" v-if="topMenus.length > visibleNumber">
       <template #title>更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">
@@ -67,8 +67,7 @@ const childrenMenus = computed(() => {
           router.children[item].path = '/redirect/' + router.children[item].path
         } else {
           if (!isHttp(router.children[item].path)) {
-            router.children[item].path =
-              router.path + '/' + router.children[item].path
+            router.children[item].path = router.path + '/' + router.children[item].path
           }
         }
         router.children[item].parentPath = router.path
@@ -125,7 +124,7 @@ function handleSelect(key, keyPath) {
     window.open(key, '_blank')
   } else if (key.indexOf('/redirect') !== -1) {
     // /redirect 路径内部打开
-    router.push({ path: key.replace("/redirect", "") }).catch(err => {});
+    router.push({ path: key.replace('/redirect', '') }).catch((err) => {})
   } else {
     // 显示左侧联动菜单
     activeRoutes(key)