[Improvement] Loading: add size prop (#620)

docs/markdown/en-US/loading.md

@@ -43,3 +43,4 @@ Vue.use(Loading);
 |-----------|-----------|-----------|-------------|-------------|
 | color | Color | `String` | `black` | `black` `white` |
 | type | Type | `String` | `gradient-circle` | `spinner` `circle` |
+| size | Size | `String` | `30px` | - |

docs/markdown/zh-CN/loading.md

@@ -43,3 +43,4 @@ Vue.use(Loading);
 |-----------|-----------|-----------|-------------|-------------|
 | color | 颜色 | `String` | `black` | `black` `white` |
 | type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
+| size | 大小 | `String` | `30px` | - |

packages/loading/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-loading" :class="['van-loading--' + type, 'van-loading--' + color]">
+  <div class="van-loading" :class="['van-loading--' + type, 'van-loading--' + color]" :style="style">
     <span class="van-loading__spinner" :class="'van-loading__spinner--' + type">
       <i v-for="item in (type === 'spinner' ? 12 : 0)" />
       <svg v-if="type === 'circular'" class="van-loading__circular" viewBox="25 25 50 50">
@@ -14,8 +14,11 @@ import install from '../utils/install';
 
 export default {
   install,
+
   name: 'van-loading',
+
   props: {
+    size: String,
     type: {
       type: String,
       default: 'gradient-circle'
@@ -24,6 +27,15 @@ export default {
       type: String,
       default: 'black'
     }
+  },
+
+  computed: {
+    style() {
+      return this.size ? {
+        width: this.size,
+        height: this.size
+      } : {};
+    }
   }
 };
 </script>

test/unit/specs/loading.spec.js

@@ -60,4 +60,14 @@ describe('Loading', () => {
 
     expect(spinner.hasClass('van-loading__spinner--circle')).to.be.true;
   });
+
+  it('loading size', () => {
+    wrapper = mount(Loading, {
+      propsData: {
+        size: '100px'
+      }
+    });
+    expect(wrapper.vm.$el.style.width).to.equal('100px');
+    expect(wrapper.vm.$el.style.height).to.equal('100px');
+  });
 });