fix: fix the bug of style-provider when update

varletjs · Jun 23, 2021 · 0640b4e · 0640b4e
1 parent 36dd315
commit 0640b4e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/packages/varlet-ui/src/style-provider/example/index.vue b/packages/varlet-ui/src/style-provider/example/index.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue'
 import Cell from '../../cell'
 import StyleProvider from '../index'
 
@@ -16,10 +17,16 @@ export default {
     [StyleProvider.name]: StyleProvider,
   },
   setup() {
-    const styles = {
-      cellFontSize: '30px',
-      cellBorderColor: 'red'
-    }
+    const styles = ref({})
+
+    onMounted(() => {
+      setTimeout(() => {
+        styles.value = {
+          cellFontSize: '30px',
+          cellBorderColor: 'red'
+        }
+      }, 1500)
+    })
 
     return {
       styles

diff --git a/packages/varlet-ui/src/style-provider/index.ts b/packages/varlet-ui/src/style-provider/index.ts
@@ -10,13 +10,15 @@ export default defineComponent({
     }
   },
   setup(props, { slots }) {
-    const styles: Record<string, string | number> = Object.entries(props.styleVars).reduce((styles, style) => {
-      const cssVar = `--${kebabCase(style[0])}`
-      styles[cssVar] = style[1] as string | number
+    return () => {
+      const styles: Record<string, string | number> = Object.entries(props.styleVars).reduce((styles, style) => {
+        const cssVar = `--${kebabCase(style[0])}`
+        styles[cssVar] = style[1] as string | number
 
-      return styles
-    }, {} as Record<string, string | number>)
+        return styles
+      }, {} as Record<string, string | number>)
 
-    return () => h('div', { style: styles }, slots.default?.())
+      return h('div', { style: styles }, slots.default?.())
+    }
   }
 })