From bd851ba4895e02c712948fc23a0e96d68b6484b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AF=9B=E7=91=9E?= <maorui@cetc-cloud.com>
Date: Sun, 21 Jun 2020 17:05:12 +0800
Subject: [PATCH] =?UTF-8?q?Fix:=20=E5=BD=A9=E8=89=B2=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E9=A1=BA=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon.vue | 60 +++++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 798e72d..01c778f 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -7,19 +7,23 @@ import Vue, { CreateElement } from 'vue'
 /// 常量(UPPER_CASE), 单例/变量(camelCase), 函数(无副作用,camelCase)
 const REG_NUM = /\s*([\d.]+)(\w+)/
 const loadingStatus = Vue.observable({ state: 0 })
-import(/* webpackChunkName: "icon" */ '@/scss/font/fonts').then(res => {
-  const container = document.createElement('i')
-  container.innerHTML =
-    '<svg aria-hidden=true style=position:absolute;width:0;height:0;overflow:hidden>' +
-    res.default +
-    '</svg>'
-  res.default = null
-  document.body.appendChild(container.firstChild)
-  loadingStatus.state = 1
-}).catch(err => {
-  console.error(err)
-  loadingStatus.state = 2
-})
+import(/* webpackChunkName: "icon" */ '@/scss/font/fonts')
+  .then(res => {
+    const container = document.createElement('i')
+    container.innerHTML =
+      '<svg aria-hidden=true style=position:absolute;width:0;height:0;overflow:hidden>' +
+      res.default +
+      '</svg>'
+    res.default = null
+    document.querySelector('html').appendChild(container.firstChild)
+    setTimeout(() => {
+      loadingStatus.state = 1
+    })
+  })
+  .catch(err => {
+    console.error(err)
+    loadingStatus.state = 2
+  })
 
 function isSymbol(id: string) {
   return document.getElementById(id) // symbol 只保留不能字体图标呈现的, 比如带颜色等的
@@ -70,24 +74,25 @@ export default {
     const imgIcon = this.imgIcon
     if (imgIcon) {
       const size = this.size
-      return <img
-        width={size}
-        height={size}
-        src={imgIcon}
-        class={STYLE.i + ' ' + STYLE.img}
-      />
+      return (
+        <img
+          width={size}
+          height={size}
+          src={imgIcon}
+          class={STYLE.i + ' ' + STYLE.img}
+        />
+      )
     }
 
     let icon = this.icon
     if (isSymbol(icon)) {
       switch (loadingStatus.state) {
         case 1:
-          return <svg
-            class={STYLE.svg + ' ' + STYLE.i}
-            style={this.style}
-          >
-            {h('use', { attrs: { 'xlink:href': '#' + icon } })}
-          </svg>
+          return (
+            <svg class={STYLE.svg + ' ' + STYLE.i} style={this.style}>
+              {h('use', { attrs: { 'xlink:href': '#' + icon } })}
+            </svg>
+          )
         case 2:
           return
         default:
@@ -95,10 +100,7 @@ export default {
       }
     }
 
-    return <i
-      class={icon + ' ' + STYLE.i}
-      style={'font-size:' + this.size}
-    />
+    return <i class={icon + ' ' + STYLE.i} style={'font-size:' + this.size} />
   },
 }
 </script>