docs(Loading): add size prop demo

ycqiang · Jan 24, 2020 · e8f5288 · e8f5288
1 parent fde1ed1
commit e8f5288
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 4 deletions.
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
@@ -138,7 +138,7 @@ Vue.use(Button);
 | hairline | 是否使用 0.5px 边框 | *boolean* | `false` |
 | loading | 是否显示为加载状态 | *boolean* | `false` |
 | loading-text | 加载状态提示文字 | *string* | - |
-| loading-type | 加载图标类型，可选值为`spinner` | *string* | `circular` |
+| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | *string* | `circular` |
 | loading-size | 加载图标大小 | *string* | `20px` |
 | url | 点击后跳转的链接地址 | *string* | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |

diff --git a/src/loading/README.md b/src/loading/README.md
@@ -25,6 +25,13 @@ Vue.use(Loading);
 <van-loading type="spinner" color="#1989fa" />
 ```
 
+### Size
+
+```html
+<van-loading size="24" />
+<van-loading type="spinner" size="24px" />
+```
+
 ### Text
 
 ```html

diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md
@@ -13,26 +13,43 @@ Vue.use(Loading);
 
 ### 加载类型
 
+通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner`
+
 ```html
 <van-loading />
 <van-loading type="spinner" />
 ```
 
 ### 自定义颜色
 
+通过`color`属性设置加载图标的颜色
+
 ```html
 <van-loading color="#1989fa" />
 <van-loading type="spinner" color="#1989fa" />
 ```
 
+### 自定义大小
+
+通过`size`属性设置加载图标的大小，默认单位为`px`
+
+```html
+<van-loading size="24" />
+<van-loading type="spinner" size="24px" />
+```
+
 ### 加载文案
 
+可以使用默认插槽在图标的右侧插入加载文案
+
 ```html
 <van-loading size="24px">加载中...</van-loading>
 ```
 
 ### 垂直排列
 
+设置`vertical`属性后，图标和文案会垂直排列
+
 ```html
 <van-loading size="24px" vertical>加载中...</van-loading>
 ```

diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue
@@ -10,6 +10,11 @@
       <van-loading type="spinner" color="#1989fa" />
     </demo-block>
 
+    <demo-block :title="$t('size')">
+      <van-loading size="24" />
+      <van-loading type="spinner" size="24" />
+    </demo-block>
+
     <demo-block :title="$t('text')">
       <van-loading size="24px">
         {{ $t('loading') }}
@@ -29,14 +34,16 @@ export default {
   i18n: {
     'zh-CN': {
       type: '加载类型',
-      color: '自定义颜色',
       text: '加载文案',
+      size: '自定义大小',
+      color: '自定义颜色',
       vertical: '垂直排列',
     },
     'en-US': {
       type: 'Type',
-      color: 'Color',
       text: 'Text',
+      size: 'Size',
+      color: 'Color',
       vertical: 'Vertical',
     },
   },

diff --git a/src/loading/test/__snapshots__/demo.spec.js.snap b/src/loading/test/__snapshots__/demo.spec.js.snap
@@ -10,6 +10,10 @@ exports[`renders demo correctly 1`] = `
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
     <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(25, 137, 250);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>
+  <div>
+    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 24px; height: 24px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+  </div>
   <div>
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
       加载中...

diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md
@@ -150,7 +150,7 @@ Toast.resetDefaultOptions('loading');
 | forbidClick | 是否禁止背景点击 | *boolean* | `false` |
 | closeOnClick `v2.1.5` | 是否在点击后关闭 | *boolean* | `false` |
 | closeOnClickOverlay `v2.2.13` | 是否在点击遮罩层后关闭 | *boolean* | `false` |
-| loadingType | 加载图标类型, 可选值为 `spinner` | *string* | `circular` |
+| loadingType | [加载图标类型](#/zh-CN/loading), 可选值为 `spinner` | *string* | `circular` |
 | duration | 展示时长(ms)，值为 0 时，toast 不会消失 | *number* | `2000` |
 | className | 自定义类名 | *any* | - |
 | onOpened | 完全展示后的回调函数 | *Function* | - |