From 2a3c75bc2f6436f80dc975136530b1934d7fa7e8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 7 Feb 2018 17:28:59 +0800
Subject: [PATCH] [Improvement] Loading: add size prop (#620)

---
 docs/markdown/en-US/loading.md  |  1 +
 docs/markdown/zh-CN/loading.md  |  1 +
 packages/loading/index.vue      | 14 +++++++++++++-
 test/unit/specs/loading.spec.js | 10 ++++++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/docs/markdown/en-US/loading.md b/docs/markdown/en-US/loading.md
index 326d138e2..9676585aa 100644
--- a/docs/markdown/en-US/loading.md
+++ b/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` | - |
diff --git a/docs/markdown/zh-CN/loading.md b/docs/markdown/zh-CN/loading.md
index b2ec4e218..b5e8651f6 100644
--- a/docs/markdown/zh-CN/loading.md
+++ b/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` | - |
diff --git a/packages/loading/index.vue b/packages/loading/index.vue
index 351a02974..4ba0f1819 100644
--- a/packages/loading/index.vue
+++ b/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>
diff --git a/test/unit/specs/loading.spec.js b/test/unit/specs/loading.spec.js
index cac5f4e06..4f6a22b71 100644
--- a/test/unit/specs/loading.spec.js
+++ b/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');
+  });
 });