[improvement] Button: add round prop (#704)

example/pages/button/index.wxml

@@ -1,20 +1,31 @@
 <demo-section>
   <demo-block title="按钮类型" padding>
     <view class="row">
-      <van-button custom-class="demo-margin-right">默认按钮</van-button>
-      <van-button type="primary">主要按钮</van-button>
+      <van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
+      <van-button type="danger">危险按钮</van-button>
     </view>
-    <van-button type="warning" custom-class="demo-margin-right">警告按钮</van-button>
-    <van-button type="danger">危险按钮</van-button>
+    <van-button custom-class="demo-margin-right">默认按钮</van-button>
+    <van-button type="warning">警告按钮</van-button>
   </demo-block>
 
   <demo-block title="朴素按钮" padding>
-    <view class="row">
-      <van-button plain custom-class="demo-margin-right">默认按钮</van-button>
-      <van-button type="primary" plain>主要按钮</van-button>
-    </view>
-    <van-button type="warning" plain custom-class="demo-margin-right">警告按钮</van-button>
-    <van-button type="danger" plain>危险按钮</van-button>
+    <van-button type="primary" plain custom-class="demo-margin-right">朴素按钮</van-button>
+    <van-button type="danger" plain>朴素按钮</van-button>
+  </demo-block>
+
+  <demo-block title="禁用状态" padding>
+    <van-button type="primary" disabled custom-class="demo-margin-right">禁用状态</van-button>
+    <van-button type="danger" disabled>禁用状态</van-button>
+  </demo-block>
+
+  <demo-block title="加载状态" padding>
+    <van-button loading type="primary" custom-class="demo-margin-right" loading-class="loading" />
+    <van-button loading type="danger" loading-class="loading" />
+  </demo-block>
+
+  <demo-block title="按钮形状" padding>
+    <van-button type="primary" square custom-class="demo-margin-right">方形按钮</van-button>
+    <van-button type="danger" round>圆形按钮</van-button>
   </demo-block>
 
   <demo-block title="按钮尺寸" padding>
@@ -24,12 +35,4 @@
     <van-button size="mini">迷你按钮</van-button>
   </demo-block>
 
-  <demo-block title="禁用状态" padding>
-    <van-button disabled>禁用状态</van-button>
-  </demo-block>
-
-  <demo-block title="加载状态" padding>
-    <van-button loading custom-class="demo-margin-right" loading-class="loading" />
-    <van-button loading type="primary" loading-class="loading" />
-  </demo-block>
 </demo-section>

packages/button/README.md

@@ -23,10 +23,31 @@
 #### 朴素按钮
 
 ```html
-<van-button type="default" plain>默认按钮</van-button>
-<van-button type="primary" plain>主要按钮</van-button>
-<van-button type="warning" plain>警告按钮</van-button>
-<van-button type="danger" plain>危险按钮</van-button>
+<van-button plain type="primary">朴素按钮</van-button>
+<van-button plain type="danger">朴素按钮</van-button>
+```
+
+#### 禁用状态
+
+通过`disabled`属性来禁用按钮，此时按钮不可点击
+
+```html
+<van-button disabled type="primary">禁用状态</van-button>
+<van-button disabled type="danger">禁用状态</van-button>
+```
+
+#### 加载状态
+
+```html 
+<van-button loading type="primary" />
+<van-button loading type="danger" />
+```
+
+#### 按钮形状
+
+```html 
+<van-button square type="primary">方形按钮</van-button>
+<van-button round type="danger">圆形按钮</van-button>
 ```
 
 #### 按钮尺寸
@@ -39,20 +60,6 @@
 <van-button size="mini">迷你按钮</van-button>
 ```
 
-#### 禁用状态
-通过`disabled`属性来禁用按钮，此时按钮不可点击
-
-```html
-<van-button disabled>禁用状态</van-button>
-```
-
-#### 加载状态
-
-```html 
-<van-button loading />
-<van-button loading type="primary" />
-```
-
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -61,9 +68,10 @@
 | type | 按钮类型，可选值为 `primary` `warning` `danger` | `String` | `default` |
 | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
 | plain | 是否为朴素按钮 | `Boolean` | `false` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| disabled | 是否禁用按钮 | `Boolean` | `false` |
 | loading | 是否显示为加载状态 | `Boolean` | `false` |
 | block | 是否为块级元素 | `Boolean` | `false` |
+| round | 是否为圆形按钮 | `Boolean` | `false` |
 | square | 是否为方形按钮 | `Boolean` | `false` |
 | open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | `String` | - |
 | app-parameter | 打开 APP 时，向 APP 传递的参数 | `String` | - |

packages/button/index.less

@@ -114,6 +114,10 @@
     display: block;
   }
 
+  &--round {
+    border-radius: 10em;
+  }
+
   &--square {
     border-radius: 0;
   }

packages/button/index.ts

@@ -3,11 +3,14 @@ import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
 
 VantComponent({
+  classes: ['loading-class'],
+
   mixins: [button, openType],
 
   props: {
     plain: Boolean,
     block: Boolean,
+    round: Boolean,
     square: Boolean,
     loading: Boolean,
     disabled: Boolean,
@@ -23,9 +26,10 @@ VantComponent({
 
   computed: {
     classes(): string {
-      const { type, size, plain, disabled, loading, square, block } = this.data;
+      const { type, size, block, plain, round, square, loading, disabled } = this.data;
       return this.classNames(`van-button--${type}`, `van-button--${size}`, {
         'van-button--block': block,
+        'van-button--round': round,
         'van-button--plain': plain,
         'van-button--square': square,
         'van-button--loading': loading,

packages/button/index.wxml

@@ -1,8 +1,6 @@
 <button
   class="custom-class van-button {{ classes }}"
   id="{{ id }}"
-  disabled="{{ disabled }}"
-  hover-class="button-hover"
   open-type="{{ openType }}"
   app-parameter="{{ appParameter }}"
   hover-stop-propagation="{{ hoverStopPropagation }}"