Fix: 彩色图标加载顺序

Maorey · Jun 21, 2020 · bd851ba · bd851ba
1 parent a7e48ec
commit bd851ba
Showing 1 changed file with 31 additions and 29 deletions.
diff --git 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,35 +74,33 @@ 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:
           icon = 'el-icon-loading'
       }
     }
 
-    return <i
-      class={icon + ' ' + STYLE.i}
-      style={'font-size:' + this.size}
-    />
+    return <i class={icon + ' ' + STYLE.i} style={'font-size:' + this.size} />
   },
 }
 </script>