From 3e9cc9466464e5446423031ebcc432e279d93492 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Wed, 4 Nov 2020 13:13:55 +0800
Subject: [PATCH] refactor(utils/css/format-length)

---
 src/_base/select-menu/src/SelectMenu.vue      |  2 +-
 src/_base/selection/src/styles/themed-size.js |  6 ++--
 src/_utils/composable/index.js                | 10 -------
 src/_utils/css/format-length.js               | 30 +++++++++++++++++++
 src/_utils/css/formatLength.js                | 16 ----------
 src/_utils/css/index.js                       |  2 +-
 src/_utils/vue/{src => }/call.js              |  0
 src/_utils/vue/{src => }/create-id.js         |  0
 src/_utils/vue/{src => }/flatten.js           |  0
 src/_utils/vue/{src => }/get-slot.js          |  0
 .../vue/{src => }/get-v-node-children.js      |  0
 src/_utils/vue/index.js                       | 16 +++++-----
 src/_utils/vue/{src => }/keep.js              |  0
 src/_utils/vue/{src => }/omit.js              |  0
 src/_utils/vue/{src => }/render.js            |  0
 src/anchor/src/BaseAnchor.vue                 |  7 +++--
 src/avatar/src/styles/themed-size.cssr.js     |  2 +-
 src/back-top/src/BackTop.vue                  |  3 +-
 src/button/src/styles/themed-size.cssr.js     | 10 +++----
 src/data-table/src/BaseTable.vue              |  2 +-
 src/data-table/src/TableParts/Body.vue        |  2 +-
 src/data-table/src/utils.js                   |  2 +-
 src/drawer/src/Drawer.vue                     |  3 +-
 src/form/src/styles/themed-size.cssr.js       |  2 +-
 src/gradient-text/src/GradientText.vue        | 12 ++++----
 src/grid/src/Col.vue                          |  6 ++--
 src/grid/src/Row.vue                          |  6 ++--
 src/icon/src/Icon.js                          |  2 +-
 src/popover/src/PopoverBody.js                |  2 +-
 src/popover/src/styles/themed-base.cssr.js    |  2 +-
 src/progress/src/Progress.vue                 | 13 ++++----
 src/steps/styles/light.js                     |  2 +-
 src/tabs/src/Tabs.vue                         | 10 +++----
 33 files changed, 88 insertions(+), 82 deletions(-)
 create mode 100644 src/_utils/css/format-length.js
 delete mode 100644 src/_utils/css/formatLength.js
 rename src/_utils/vue/{src => }/call.js (100%)
 rename src/_utils/vue/{src => }/create-id.js (100%)
 rename src/_utils/vue/{src => }/flatten.js (100%)
 rename src/_utils/vue/{src => }/get-slot.js (100%)
 rename src/_utils/vue/{src => }/get-v-node-children.js (100%)
 rename src/_utils/vue/{src => }/keep.js (100%)
 rename src/_utils/vue/{src => }/omit.js (100%)
 rename src/_utils/vue/{src => }/render.js (100%)

diff --git a/src/_base/select-menu/src/SelectMenu.vue b/src/_base/select-menu/src/SelectMenu.vue
index 594cdbe62..383991731 100644
--- a/src/_base/select-menu/src/SelectMenu.vue
+++ b/src/_base/select-menu/src/SelectMenu.vue
@@ -82,7 +82,7 @@ import NScrollbar from '../../../scrollbar'
 import NSelectOption from './SelectOption.js'
 import NSelectGroupHeader from './SelectGroupHeader.js'
 import NEmpty from '../../../empty'
-import { depx, formatLength } from '../../../_utils/css'
+import { depx, formatLength } from '../../../_utils'
 import { createKey } from '../../../_utils/cssr'
 import { usecssr } from '../../../_mixins'
 import styles from './styles'
diff --git a/src/_base/selection/src/styles/themed-size.js b/src/_base/selection/src/styles/themed-size.js
index 7fddfd817..996616912 100644
--- a/src/_base/selection/src/styles/themed-size.js
+++ b/src/_base/selection/src/styles/themed-size.js
@@ -1,5 +1,5 @@
 import { cTB, c, cB, cE, cM } from '../../../../_utils/cssr'
-import formatLength from '../../../../_utils/css/formatLength'
+import { formatLength } from '../../../../_utils'
 
 export default c([
   ({ props }) => {
@@ -24,8 +24,8 @@ export default c([
           minHeight: height
         }, [
           cB('base-selection-input-tag', {
-            height: formatLength(height, 1, -6),
-            lineHeight: formatLength(height, 1, -6)
+            height: formatLength(height, { c: 1, offset: -6 }),
+            lineHeight: formatLength(height, { c: 1, offset: -6 })
           })
         ])
       ])
diff --git a/src/_utils/composable/index.js b/src/_utils/composable/index.js
index 8e76d1c16..0bfc22c96 100644
--- a/src/_utils/composable/index.js
+++ b/src/_utils/composable/index.js
@@ -14,16 +14,6 @@ export function useInjectionRef (injectionName, key, fallback) {
   return toRef(injection, key)
 }
 
-export function onFontReady (callback) {
-  onMounted(() => {
-    const fontsReady = document.fonts.ready
-    const currentInstance = getCurrentInstance().proxy
-    fontsReady.then(() => {
-      callback(currentInstance)
-    })
-  })
-}
-
 export function useInjectionCollection (injectionName, collectionKey, valueRef) {
   const injection = inject(injectionName, null)
   if (injection === null) return
diff --git a/src/_utils/css/format-length.js b/src/_utils/css/format-length.js
new file mode 100644
index 000000000..ec590acf4
--- /dev/null
+++ b/src/_utils/css/format-length.js
@@ -0,0 +1,30 @@
+const pureNumberRegex = /^(\d|\.)+$/
+const numberRegex = /(\d|\.)+/
+
+export default function formatLength (length, options = {}) {
+  const {
+    c = 1,
+    offset = 0,
+    attachPx = true
+  } = options
+  const type = typeof length
+  if (type === 'number') {
+    const result = (length + offset) * c
+    if (result === 0) return '0'
+    return `${result}px`
+  } else if (type === 'string') {
+    if (pureNumberRegex.test(length)) {
+      const result = (Number(length) + offset) * c
+      if (attachPx) {
+        if (result === 0) return '0'
+        return `${result}px`
+      } else {
+        return result
+      }
+    } else {
+      const result = numberRegex.exec(length)
+      if (!result) return length
+      return length.replace(numberRegex, '' + (Number(result[0]) + offset) * c)
+    }
+  }
+}
diff --git a/src/_utils/css/formatLength.js b/src/_utils/css/formatLength.js
deleted file mode 100644
index 557ee6990..000000000
--- a/src/_utils/css/formatLength.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const pureNumberRegex = /^(\d|\.)+$/
-const numberRegex = /(\d|\.)+/
-
-export default function formatLength (length, weight = 1, offset = 0) {
-  if (typeof length === 'number') return '' + ((length + offset) && ((length + offset) * weight) + 'px')
-  if (typeof length === 'string') {
-    if (pureNumberRegex.test(length)) {
-      return ((Number(length) + offset) * weight) + 'px'
-    } else {
-      const result = numberRegex.exec(length)
-      if (!result) return length
-      return length.replace(numberRegex, '' + (Number(result[0]) + offset) * weight)
-    }
-  }
-  return length
-}
diff --git a/src/_utils/css/index.js b/src/_utils/css/index.js
index ed4235b9a..2c79b0877 100644
--- a/src/_utils/css/index.js
+++ b/src/_utils/css/index.js
@@ -1,3 +1,3 @@
 export { default as depx } from './depx'
 export { default as pxfy } from './pxfy'
-export { default as formatLength } from './formatLength'
+export { default as formatLength } from './format-length'
diff --git a/src/_utils/vue/src/call.js b/src/_utils/vue/call.js
similarity index 100%
rename from src/_utils/vue/src/call.js
rename to src/_utils/vue/call.js
diff --git a/src/_utils/vue/src/create-id.js b/src/_utils/vue/create-id.js
similarity index 100%
rename from src/_utils/vue/src/create-id.js
rename to src/_utils/vue/create-id.js
diff --git a/src/_utils/vue/src/flatten.js b/src/_utils/vue/flatten.js
similarity index 100%
rename from src/_utils/vue/src/flatten.js
rename to src/_utils/vue/flatten.js
diff --git a/src/_utils/vue/src/get-slot.js b/src/_utils/vue/get-slot.js
similarity index 100%
rename from src/_utils/vue/src/get-slot.js
rename to src/_utils/vue/get-slot.js
diff --git a/src/_utils/vue/src/get-v-node-children.js b/src/_utils/vue/get-v-node-children.js
similarity index 100%
rename from src/_utils/vue/src/get-v-node-children.js
rename to src/_utils/vue/get-v-node-children.js
diff --git a/src/_utils/vue/index.js b/src/_utils/vue/index.js
index bbca071f9..73a5d1ec4 100644
--- a/src/_utils/vue/index.js
+++ b/src/_utils/vue/index.js
@@ -1,8 +1,8 @@
-export { getSlot } from './src/get-slot'
-export { getVNodeChildren } from './src/get-v-node-children'
-export { createId } from './src/create-id'
-export { keep } from './src/keep'
-export { omit } from './src/omit'
-export { flatten } from './src/flatten'
-export { call } from './src/call'
-export { render } from './src/render'
+export { getSlot } from './get-slot'
+export { getVNodeChildren } from './get-v-node-children'
+export { createId } from './create-id'
+export { keep } from './keep'
+export { omit } from './omit'
+export { flatten } from './flatten'
+export { call } from './call'
+export { render } from './render'
diff --git a/src/_utils/vue/src/keep.js b/src/_utils/vue/keep.js
similarity index 100%
rename from src/_utils/vue/src/keep.js
rename to src/_utils/vue/keep.js
diff --git a/src/_utils/vue/src/omit.js b/src/_utils/vue/omit.js
similarity index 100%
rename from src/_utils/vue/src/omit.js
rename to src/_utils/vue/omit.js
diff --git a/src/_utils/vue/src/render.js b/src/_utils/vue/render.js
similarity index 100%
rename from src/_utils/vue/src/render.js
rename to src/_utils/vue/render.js
diff --git a/src/anchor/src/BaseAnchor.vue b/src/anchor/src/BaseAnchor.vue
index 106b58259..44c42d619 100644
--- a/src/anchor/src/BaseAnchor.vue
+++ b/src/anchor/src/BaseAnchor.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script>
-import { nextTick, ref, markRaw } from 'vue'
+import { nextTick, ref, markRaw, getCurrentInstance } from 'vue'
 import getScrollParent from '../../_utils/dom/get-scroll-parent'
 import {
   configurable,
   themeable,
   usecssr
 } from '../../_mixins'
-import { onFontReady } from '../../_utils/composable/index'
+import { onFontReady } from 'vooks'
 import { warn } from '../../_utils/naive/warn'
 import getTarget from '../../_utils/dom/get-target'
 import styles from './styles'
@@ -86,7 +86,8 @@ export default {
     }
   },
   setup () {
-    onFontReady(vm => {
+    const vm = getCurrentInstance().proxy
+    onFontReady(() => {
       vm.init()
       vm.setActiveHref(window.location)
       vm.handleScroll(false)
diff --git a/src/avatar/src/styles/themed-size.cssr.js b/src/avatar/src/styles/themed-size.cssr.js
index 1c6e7dc6a..32edc090c 100644
--- a/src/avatar/src/styles/themed-size.cssr.js
+++ b/src/avatar/src/styles/themed-size.cssr.js
@@ -1,5 +1,5 @@
 import { c, cE, cM, cTB, cB } from '../../../_utils/cssr'
-import { depx, pxfy } from '../../../../_utils/css'
+import { depx, pxfy } from '../../../_utils/css'
 
 export default c([
   ({ props }) => {
diff --git a/src/back-top/src/BackTop.vue b/src/back-top/src/BackTop.vue
index ffa4cf7d2..ce316dcbb 100644
--- a/src/back-top/src/BackTop.vue
+++ b/src/back-top/src/BackTop.vue
@@ -59,9 +59,8 @@ import {
   themeable,
   usecssr
 } from '../../_mixins'
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength, warn } from '../../_utils'
 import styles from './styles'
-import { warn } from '../../_utils/naive/warn'
 import getTarget from '../../_utils/dom/get-target'
 import NLazyTeleport from '../../_base/lazy-teleport'
 
diff --git a/src/button/src/styles/themed-size.cssr.js b/src/button/src/styles/themed-size.cssr.js
index 2652fb6ee..479749f37 100644
--- a/src/button/src/styles/themed-size.cssr.js
+++ b/src/button/src/styles/themed-size.cssr.js
@@ -1,5 +1,5 @@
 import { c, cB, cTB, cE, cM, createKey } from '../../../_utils/cssr'
-import formatLength from '../../../_utils/css/formatLength'
+import { formatLength } from '../../../_utils'
 
 export default c([
   ({ props }) => {
@@ -10,8 +10,8 @@ export default c([
     const borderRadius = local[createKey('borderRadius', size)]
     const padding = local[createKey('padding', size)]
     const roundPadding = local[createKey('paddingRound', size)]
-    const roundBorderRadius = formatLength(height, 0.5)
-    const lineHeight = formatLength(height, 1, -2)
+    const roundBorderRadius = formatLength(height, { c: 0.5 })
+    const lineHeight = formatLength(height, { offset: -2 })
     const iconSize = local[createKey('iconSize', size)]
     const iconMargin = local[createKey('iconMargin', size)]
     return cTB(
@@ -64,8 +64,8 @@ export default c([
               height: iconSize
             }),
             cB('base-loading', {
-              height: formatLength(iconSize, 1, -2),
-              width: formatLength(iconSize, 1, -2)
+              height: formatLength(iconSize, { offset: -2 }),
+              width: formatLength(iconSize, { offset: -2 })
             })
           ]),
           cE('content', [
diff --git a/src/data-table/src/BaseTable.vue b/src/data-table/src/BaseTable.vue
index 788f4f3f1..134217e24 100644
--- a/src/data-table/src/BaseTable.vue
+++ b/src/data-table/src/BaseTable.vue
@@ -30,7 +30,7 @@ import { VResizeObserver } from 'vueuc'
 import { ref } from 'vue'
 import TableHeader from './TableParts/Header.vue'
 import TableBody from './TableParts/Body.vue'
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength } from '../../_utils/css'
 
 export default {
   components: {
diff --git a/src/data-table/src/TableParts/Body.vue b/src/data-table/src/TableParts/Body.vue
index 211435fea..3d9a4bc20 100644
--- a/src/data-table/src/TableParts/Body.vue
+++ b/src/data-table/src/TableParts/Body.vue
@@ -76,7 +76,7 @@ import { ref } from 'vue'
 import Cell from './Cell.vue'
 import { createCustomWidthStyle, setCheckStatusOfRow, createRowKey } from '../utils'
 import NScrollbar from '../../../scrollbar'
-import formatLength from '../../../_utils/css/formatLength'
+import { formatLength } from '../../../_utils'
 
 export default {
   components: {
diff --git a/src/data-table/src/utils.js b/src/data-table/src/utils.js
index d63609bee..8e7e41576 100644
--- a/src/data-table/src/utils.js
+++ b/src/data-table/src/utils.js
@@ -1,4 +1,4 @@
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength } from '../../_utils'
 
 export function createCustomWidthStyle (column, index, placement) {
   if (column.width) {
diff --git a/src/drawer/src/Drawer.vue b/src/drawer/src/Drawer.vue
index 2e2f778b5..005acbd14 100644
--- a/src/drawer/src/Drawer.vue
+++ b/src/drawer/src/Drawer.vue
@@ -43,8 +43,7 @@ import {
   usecssr
 } from '../../_mixins'
 import { zindexable } from '../../_directives'
-import formatLength from '../../_utils/css/formatLength'
-import { warn } from '../../_utils'
+import { warn, formatLength } from '../../_utils'
 import { useCompitable, useIsMounted } from 'vooks'
 import NLazyTeleport from '../../_base/lazy-teleport'
 import NDrawerBodyWrapper from './DrawerBodyWrapper.vue'
diff --git a/src/form/src/styles/themed-size.cssr.js b/src/form/src/styles/themed-size.cssr.js
index 497708543..a9326d5a9 100644
--- a/src/form/src/styles/themed-size.cssr.js
+++ b/src/form/src/styles/themed-size.cssr.js
@@ -1,5 +1,5 @@
 import { c, cB, cM, createKey } from '../../../_utils/cssr'
-import { depx, pxfy } from '../../../../_utils/css'
+import { depx, pxfy } from '../../../_utils/css'
 
 export default c([
   ({ props }) => {
diff --git a/src/gradient-text/src/GradientText.vue b/src/gradient-text/src/GradientText.vue
index c92e2f742..8323971ee 100644
--- a/src/gradient-text/src/GradientText.vue
+++ b/src/gradient-text/src/GradientText.vue
@@ -16,16 +16,18 @@
 </template>
 
 <script>
-import withapp from '../../_mixins/withapp'
-import themeable from '../../_mixins/themeable'
-import formatLength from '../../_utils/css/formatLength'
-import usecssr from '../../_mixins/usecssr'
+import {
+  configurable,
+  themeable,
+  usecssr
+} from '../../_mixins'
+import { formatLength } from '../../_utils'
 import styles from './styles/index'
 
 export default {
   name: 'GradientText',
   mixins: [
-    withapp,
+    configurable,
     themeable,
     usecssr(styles)
   ],
diff --git a/src/grid/src/Col.vue b/src/grid/src/Col.vue
index a881774ed..5d3e715f4 100644
--- a/src/grid/src/Col.vue
+++ b/src/grid/src/Col.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import formatLength from '../../_utils/css/formatLength'
-import usecssr from '../../_mixins/usecssr'
+import { formatLength } from '../../_utils'
+import { usecssr } from '../../_mixins'
 import styles from './styles/col.js'
 
 export default {
@@ -61,7 +61,7 @@ export default {
       return this.NRow.gutter
     },
     stylePadding () {
-      return `${formatLength(this.NRow.verticalGutter, 0.5)} ${formatLength(this.NRow.horizontalGutter, 0.5)}`
+      return `${formatLength(this.NRow.verticalGutter, { c: 0.5 })} ${formatLength(this.NRow.horizontalGutter, { c: 0.5 })}`
     },
     computedPush () {
       return this.push - this.pull
diff --git a/src/grid/src/Row.vue b/src/grid/src/Row.vue
index 938dd3983..8f1d28189 100644
--- a/src/grid/src/Row.vue
+++ b/src/grid/src/Row.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import formatLength from '../../_utils/css/formatLength'
-import usecssr from '../../_mixins/usecssr'
+import { formatLength } from '../../_utils'
+import { usecssr } from '../../_mixins'
 import styles from './styles/row.js'
 
 export default {
@@ -64,7 +64,7 @@ export default {
       return gutter
     },
     styleMargin () {
-      return `0px -${formatLength(this.horizontalGutter, 0.5)}`
+      return `0px -${formatLength(this.horizontalGutter, { c: 0.5 })}`
     },
     styleWidth () {
       return `calc(100% + ${formatLength(this.horizontalGutter)})`
diff --git a/src/icon/src/Icon.js b/src/icon/src/Icon.js
index 286d45490..85c28ffb2 100644
--- a/src/icon/src/Icon.js
+++ b/src/icon/src/Icon.js
@@ -5,7 +5,7 @@ import {
   usecssr
 } from '../../_mixins'
 import styles from './styles/index'
-import formatLength from '../../_utils/css/formatLength'
+import { formatLength } from '../../_utils'
 import { getSlot } from '../../_utils/vue'
 
 export default {
diff --git a/src/popover/src/PopoverBody.js b/src/popover/src/PopoverBody.js
index 24ebf636e..d275b2c27 100644
--- a/src/popover/src/PopoverBody.js
+++ b/src/popover/src/PopoverBody.js
@@ -7,7 +7,7 @@ import {
 import { clickoutside, mousemoveoutside, zindexable } from '../../_directives'
 import { configurable, themeable, placeable, usecssr } from '../../_mixins'
 import styles from './styles'
-import { formatLength } from '../../_utils/css'
+import { formatLength } from '../../_utils'
 import { getSlot } from '../../_utils/vue'
 
 export default {
diff --git a/src/popover/src/styles/themed-base.cssr.js b/src/popover/src/styles/themed-base.cssr.js
index e99cf6cc2..095897b13 100644
--- a/src/popover/src/styles/themed-base.cssr.js
+++ b/src/popover/src/styles/themed-base.cssr.js
@@ -1,5 +1,5 @@
 import { c, cTB, cB, cM } from '../../../_utils/cssr'
-import { depx, pxfy } from '../../../../_utils/css'
+import { depx, pxfy } from '../../../_utils/css'
 
 export default c([
   ({ props }) => {
diff --git a/src/progress/src/Progress.vue b/src/progress/src/Progress.vue
index 67c98189b..611c439a4 100644
--- a/src/progress/src/Progress.vue
+++ b/src/progress/src/Progress.vue
@@ -234,7 +234,7 @@
 </template>
 
 <script>
-import { nextTick } from 'vue'
+import { nextTick, getCurrentInstance } from 'vue'
 import NIcon from '../../icon'
 import {
   CheckmarkIcon as SuccessIcon,
@@ -250,8 +250,8 @@ import {
   usecssr
 } from '../../_mixins'
 import styles from './styles/index.js'
-import formatLength from '../../_utils/css/formatLength.js'
-import { onFontReady } from '../../_utils/composable'
+import { formatLength } from '../../_utils'
+import { onFontReady } from 'vooks'
 
 function circlePath (r, sw, vw = 100) {
   return `m ${vw / 2} ${vw / 2 - r} a ${r} ${r} 0 1 1 0 ${2 * r} a ${r} ${r} 0 1 1 0 -${2 * r}`
@@ -352,7 +352,8 @@ export default {
     }
   },
   setup () {
-    onFontReady(vm => {
+    const vm = getCurrentInstance().proxy
+    onFontReady(() => {
       if (vm.syntheticIndicatorPlacement === 'inside-label') {
         nextTick(() => {
           vm.indicatorPercentage = vm.calcIndicatorPercentage()
@@ -378,7 +379,7 @@ export default {
       if (this.borderRadius !== undefined) {
         return formatLength(this.borderRadius)
       }
-      if (this.height !== undefined) return formatLength(this.height / 2)
+      if (this.height !== undefined) return formatLength(this.height, { c: 0.5 })
       return null
     },
     styleFillBorderRadius () {
@@ -388,7 +389,7 @@ export default {
       if (this.borderRadius !== undefined) {
         return formatLength(this.borderRadius)
       }
-      if (this.height !== undefined) return formatLength(this.height / 2)
+      if (this.height !== undefined) return formatLength(this.height, { c: 0.5 })
       return null
     },
     syntheticIndicatorPlacement () {
diff --git a/src/steps/styles/light.js b/src/steps/styles/light.js
index 359ab25f6..be8df8846 100644
--- a/src/steps/styles/light.js
+++ b/src/steps/styles/light.js
@@ -8,7 +8,7 @@ export default create({
     return {
       ...commonVariables,
       stepHeaderFontWeight: base.fontWeightStrong,
-      indicatorTextColorProcess: 'black',
+      indicatorTextColorProcess: derived.baseColor,
       indicatorTextColorWait: derived.textColorDisabled,
       indicatorTextColorFinish: derived.primaryColor,
       indicatorTextColorError: derived.errorColor,
diff --git a/src/tabs/src/Tabs.vue b/src/tabs/src/Tabs.vue
index ed940f77d..8e55f84da 100644
--- a/src/tabs/src/Tabs.vue
+++ b/src/tabs/src/Tabs.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
 import NIcon from '../../icon'
 import {
   configurable,
@@ -105,9 +105,8 @@ import {
 import { VResizeObserver } from 'vueuc'
 import { throttle } from 'lodash-es'
 import styles from './styles'
-import { warn } from '../../_utils/naive/warn'
-import { useCompitable } from 'vooks'
-import { onFontReady } from '../../_utils/composable'
+import { warn } from '../../_utils'
+import { useCompitable, onFontReady } from 'vooks'
 
 export default {
   name: 'Tabs',
@@ -189,7 +188,8 @@ export default {
     }
   },
   setup (props) {
-    onFontReady(vm => {
+    const vm = getCurrentInstance().proxy
+    onFontReady(() => {
       vm.updateScrollStatus()
       if (vm.typeIsLine) {
         vm.updateCurrentBarPosition()