[new feature] Button: add loading-text prop (#2732)

packages/button/demo/index.vue

@@ -42,6 +42,7 @@
       />
       <van-button
         loading
+        :loading-text="$t('loadingText')"
         type="danger"
       />
     </demo-block>
@@ -86,7 +87,8 @@ export default {
       mini: '迷你按钮',
       plain: '朴素按钮',
       square: '方形按钮',
-      round: '圆形按钮'
+      round: '圆形按钮',
+      loadingText: '加载中...'
     },
     'en-US': {
       type: 'Type',
@@ -103,7 +105,8 @@ export default {
       mini: 'Mini',
       plain: 'Plain',
       square: 'Square',
-      round: 'Round'
+      round: 'Round',
+      loadingText: 'Loading...'
     }
   }
 };
@@ -122,10 +125,6 @@ export default {
     &--normal:not(:last-child) {
       margin-right: 10px;
     }
-
-    .van-loading {
-      margin: 0 18px;
-    }
   }
 
   .van-doc-demo-block {

packages/button/en-US.md

@@ -36,7 +36,7 @@ Vue.use(Button);
 
 ```html 
 <van-button loading type="primary" />
-<van-button loading type="primary" />
+<van-button loading type="primary" loading-text="Loading..." />
 ```
 
 #### Shape
@@ -65,11 +65,12 @@ Vue.use(Button);
 | tag | Tag | `String` | `button` |
 | native-type | Native Type Attribute | `String` | `''` |
 | plain | Whether to be plain button | `Boolean` | `false` |
-| disabled | Whether to disable button | `Boolean` | `false` |
-| loading | Whether show loading status | `Boolean` | `false` |
 | block | Whether to set display block | `Boolean` | `false` |
 | round | Whether to be round button | `Boolean` | `false` |
 | square | Whether to be square button | `Boolean` | `false` |
+| disabled | Whether to disable button | `Boolean` | `false` |
+| loading | Whether show loading status | `Boolean` | `false` |
+| loading-text | Loading text | `String` | - |
 
 ### Event
 

packages/button/index.js

@@ -16,6 +16,7 @@ export default sfc({
     loading: Boolean,
     disabled: Boolean,
     nativeType: String,
+    loadingText: String,
     bottomAction: Boolean,
     tag: {
       type: String,
@@ -33,7 +34,7 @@ export default sfc({
 
   render(h, context) {
     const { props } = context;
-    const { type, disabled, loading } = props;
+    const { type, disabled, loading, loadingText } = props;
 
     const onClick = event => {
       if (!loading && !disabled) {
@@ -62,7 +63,12 @@ export default sfc({
         {...inherit(context)}
       >
         {loading ? (
-          <Loading size="20px" color={type === 'default' ? undefined : ''} />
+          [
+            <Loading size="20px" color={type === 'default' ? undefined : ''} />,
+            loadingText && (
+              <span class={bem('loading-text')}>{loadingText}</span>
+            )
+          ]
         ) : (
           <span class={bem('text')}>{context.children || props.text}</span>
         )}

packages/button/index.less

@@ -147,4 +147,10 @@
   &--square {
     border-radius: 0;
   }
+
+  &__loading-text {
+    margin-left: 5px;
+    display: inline-block;
+    vertical-align: middle;
+  }
 }

packages/button/test/__snapshots__/demo.spec.js.snap

@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal van-button--loading">
       <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
     </button> <button class="van-button van-button--danger van-button--normal van-button--loading">
-      <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><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--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__loading-text">加载中...</span>
     </button></div>
   <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
   <div><button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--default van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--default van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>

packages/button/zh-CN.md

@@ -10,6 +10,7 @@ Vue.use(Button);
 ### 代码演示
 
 #### 按钮类型
+
 支持`default`、`primary`、`warning`、`danger`四种类型，默认为`default`
 
 ```html
@@ -39,7 +40,7 @@ Vue.use(Button);
 
 ```html 
 <van-button loading type="primary" />
-<van-button loading type="danger" />
+<van-button loading type="danger" loading-text="加载中..." />
 ```
 
 #### 按钮形状
@@ -50,6 +51,7 @@ Vue.use(Button);
 ```
 
 #### 按钮尺寸
+
 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
 ```html 
@@ -69,12 +71,13 @@ Vue.use(Button);
 | text | 文字 | `String` | - | - |
 | tag | HTML 标签 | `String` | `button` | - |
 | native-type | 原生 type 属性 | `String` | - | - |
-| disabled | 是否禁用按钮 | `Boolean` | `false` | - |
-| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
 | block | 是否为块级元素 | `Boolean` | `false` | - |
 | plain | 是否为朴素按钮 | `Boolean` | `false` | 1.1.13 |
 | square | 是否为方形按钮 | `Boolean` | `false` | 1.2.0 |
 | round | 是否为圆形按钮 | `Boolean` | `false` | 1.3.4 |
+| disabled | 是否禁用按钮 | `Boolean` | `false` | - |
+| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
+| loading-text | 加载状态提示文字 | `String` | - | 1.6.3 |
 
 ### Event