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

packages/button/demo/index.vue

@@ -31,13 +31,12 @@
 
     <demo-block :title="$t('title3')">
       <van-button loading />
-      <van-button loading type="primary" />
+      <van-button loading type="danger" />
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-button tag="a" href="https://www.youzan.com" target="_blank">
+      <van-button type="danger" square>{{ $t('square') }}</van-button>
-        {{ $t('button') }}
+      <van-button type="danger" round>{{ $t('round') }}</van-button>
-      </van-button>
     </demo-block>
   </demo-section>
 </template>
@@ -49,8 +48,7 @@ export default {
       title1: '按钮类型',
       title2: '按钮尺寸',
       title3: '加载状态',
-      title4: '自定义按钮标签',
+      title4: '按钮形状',
-      title5: '页面底部操作按钮',
       default: '默认按钮',
       primary: '主要按钮',
       danger: '危险按钮',
@@ -59,14 +57,15 @@ export default {
       normal: '普通按钮',
       small: '小型按钮',
       mini: '迷你按钮',
-      plain: '朴素按钮'
+      plain: '朴素按钮',
+      square: '方形按钮',
+      round: '圆形按钮'
     },
     'en-US': {
       title1: 'Type',
       title2: 'Size',
       title3: 'Loading',
-      title4: 'Custom Tag',
+      title4: 'Shape',
-      title5: 'Action Button',
       default: 'Default',
       primary: 'Primary',
       danger: 'Danger',
@@ -75,7 +74,9 @@ export default {
       normal: 'Normal',
       small: 'Small',
       mini: 'Mini',
-      plain: 'Plain'
+      plain: 'Plain',
+      square: 'Square',
+      round: 'Round'
     }
   }
 };

packages/button/en-US.md

@@ -49,13 +49,11 @@ Vue.use(Button);
 <van-button loading type="primary" />
 ```
 
-#### Custom Tag
+#### Shape
-Use `tag` prop to custom button tag
 
 ```html 
-<van-button tag="a" href="https://www.youzan.com" target="_blank">
+<van-button type="danger" square>Square</van-button>
-  Button
+<van-button type="danger" round>Round</van-button>
-</van-button>
 ```
 
 ### API
@@ -71,6 +69,7 @@ Use `tag` prop to custom button tag
 | 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` |
 
 ### Event

packages/button/index.vue

@@ -9,6 +9,7 @@
       {
         block,
         plain,
+        round,
         square,
         loading,
         disabled,
@@ -35,6 +36,7 @@ export default create({
     text: String,
     block: Boolean,
     plain: Boolean,
+    round: Boolean,
     square: Boolean,
     loading: Boolean,
     disabled: Boolean,

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

@@ -31,14 +31,13 @@ exports[`renders demo correctly 1`] = `
     <button class="van-button van-button--default van-button--normal van-button--loading van-button--unclickable">
       <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;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--primary van-button--normal van-button--loading van-button--unclickable">
+    <button class="van-button van-button--danger van-button--normal van-button--loading van-button--unclickable">
       <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>
   </div>
   <div>
-    <a href="https://www.youzan.com" target="_blank" class="van-button van-button--default van-button--normal"><span class="van-button__text">
+    <button class="van-button van-button--danger 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>
-    </span></a>
   </div>
 </div>
 `;

packages/button/zh-CN.md

@@ -39,6 +39,7 @@ Vue.use(Button);
 ```
 
 #### 禁用状态
+
 通过`disabled`属性来禁用按钮，此时按钮不可点击
 
 ```html
@@ -52,14 +53,11 @@ Vue.use(Button);
 <van-button loading type="primary" />
 ```
 
-#### 自定义按钮标签
+#### 按钮形状
-
-按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
 
 ```html 
-<van-button tag="a" href="https://www.youzan.com" target="_blank">
+<van-button type="danger" square>方形按钮</van-button>
-  按钮
+<van-button type="danger" round>圆形按钮</van-button>
-</van-button>
 ```
 
 
@@ -73,9 +71,10 @@ Vue.use(Button);
 | tag | 按钮 HTML 标签 | `String` | `button` |
 | native-type | 按钮类型（原生） | `String` | - |
 | plain | 是否为朴素按钮 | `Boolean` | `false` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| disabled | 是否禁用按钮 | `Boolean` | `false` |
 | loading | 是否显示为加载状态 | `Boolean` | `false` |
 | block | 是否为块级元素 | `Boolean` | `false` |
+| round | 是否为圆形按钮 | `Boolean` | `false` |
 | square | 是否为方形按钮 | `Boolean` | `false` |
 
 ### Event

packages/vant-css/src/button.css

@@ -140,6 +140,10 @@
     border: 1px solid $button-disabled-border-color;
   }
 
+  &--round {
+    border-radius: 10em;
+  }
+
   &--square {
     border-radius: 0;
   }