refactor(Loading): refactor with composition api

src/loading/index.js

@@ -1,8 +1,21 @@
-// Utils
+import { computed } from 'vue';
 import { createNamespace, addUnit } from '../utils';
 
 const [createComponent, bem] = createNamespace('loading');
 
+export default createComponent({
+  props: {
+    size: [Number, String],
+    color: String,
+    vertical: Boolean,
+    textSize: [Number, String],
+    type: {
+      type: String,
+      default: 'circular',
+    },
+  },
+
+  setup(props, { slots }) {
     const SpinIcon = [];
     for (let i = 0; i < 12; i++) {
       SpinIcon.push(<i />);
@@ -14,51 +27,46 @@ const CircularIcon = (
       </svg>
     );
 
-export default createComponent({
-  props: {
-    color: String,
-    size: [Number, String],
-    vertical: Boolean,
-    textSize: [Number, String],
-    type: {
-      type: String,
-      default: 'circular',
-    },
-  },
-
-  methods: {
-    genLoadingText() {
-      if (this.$slots.default) {
-        const style = this.textSize && {
-          fontSize: addUnit(this.textSize),
-        };
-
+    const renderText = () => {
+      if (slots.default) {
         return (
-          <span class={bem('text')} style={style}>
-            {this.$slots.default()}
+          <span
+            class={bem('text')}
+            style={{
+              fontSize: addUnit(props.textSize),
+            }}
+          >
+            {slots.default()}
           </span>
         );
       }
-    },
-  },
+    };
 
-  render() {
-    const { color, size, type, vertical } = this;
+    const spinnerStyle = computed(() => {
+      const style = {
+        color: props.color,
+      };
 
-    const style = { color };
-    if (size) {
-      const iconSize = addUnit(size);
-      style.width = iconSize;
-      style.height = iconSize;
+      if (props.size) {
+        const size = addUnit(props.size);
+        style.width = size;
+        style.height = size;
       }
 
+      return style;
+    });
+
+    return () => {
+      const { type, vertical } = props;
+
       return (
         <div class={bem([type, { vertical }])}>
-        <span class={bem('spinner', type)} style={style}>
+          <span class={bem('spinner', type)} style={spinnerStyle.value}>
             {type === 'spinner' ? SpinIcon : CircularIcon}
           </span>
-        {this.genLoadingText()}
+          {renderText()}
         </div>
       );
+    };
   },
 });