diff --git a/packages/button/demo/index.vue b/packages/button/demo/index.vue
index 972829e67..83a0dfe58 100644
--- a/packages/button/demo/index.vue
+++ b/packages/button/demo/index.vue
@@ -42,6 +42,7 @@
/>
@@ -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 {
diff --git a/packages/button/en-US.md b/packages/button/en-US.md
index 5f5b6e0d6..9f5e04b89 100644
--- a/packages/button/en-US.md
+++ b/packages/button/en-US.md
@@ -36,7 +36,7 @@ Vue.use(Button);
```html
-
+
```
#### 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
diff --git a/packages/button/index.js b/packages/button/index.js
index c71c4f116..63df8ca67 100644
--- a/packages/button/index.js
+++ b/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 ? (
-
+ [
+ ,
+ loadingText && (
+ {loadingText}
+ )
+ ]
) : (
{context.children || props.text}
)}
diff --git a/packages/button/index.less b/packages/button/index.less
index d3cfa4d49..c15dcf717 100644
--- a/packages/button/index.less
+++ b/packages/button/index.less
@@ -147,4 +147,10 @@
&--square {
border-radius: 0;
}
+
+ &__loading-text {
+ margin-left: 5px;
+ display: inline-block;
+ vertical-align: middle;
+ }
}
diff --git a/packages/button/test/__snapshots__/demo.spec.js.snap b/packages/button/test/__snapshots__/demo.spec.js.snap
index 6a44d9365..f295fd198 100644
--- a/packages/button/test/__snapshots__/demo.spec.js.snap
+++ b/packages/button/test/__snapshots__/demo.spec.js.snap
@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md
index 722571cb9..fd030304c 100644
--- a/packages/button/zh-CN.md
+++ b/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
-
+
```
#### 按钮形状
@@ -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