From 9f420f4b7932257b492947c9958e61aa9522d2e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 30 Jul 2018 13:50:31 +0800
Subject: [PATCH] [breaking change] Button: rewrite

---
 dist/btn-group/index.js                       |  30 --
 dist/btn-group/index.wxml                     |   3 -
 dist/btn-group/index.wxss                     |   3 -
 example/app.wxss                              |  11 +-
 example/components/demo-block/index.js        |   5 +
 .../components/demo-block}/index.json         |   0
 example/components/demo-block/index.wxml      |   4 +
 example/components/demo-block/index.wxss      |  11 +
 example/pages/button/index.js                 |  16 +-
 example/pages/button/index.json               |   2 +-
 example/pages/button/index.wxml               |  72 ++---
 example/pages/button/index.wxss               |   0
 example/pages/dialog/index.json               |   1 -
 example/pages/dialog/index.wxml               |  16 +-
 example/pages/field/index.json                |   1 -
 example/pages/field/index.wxml                |   8 +-
 example/pages/popup/index.json                |   3 +-
 example/pages/popup/index.wxml                |  32 +-
 example/pages/toast/index.json                |   1 -
 example/pages/toast/index.wxml                |  45 ++-
 packages/button-group/index.js                |  28 --
 packages/button-group/index.json              |   3 -
 packages/button-group/index.wxml              |   3 -
 packages/button-group/index.wxss              |   3 -
 packages/button/README.md                     | 121 ++++----
 ...ative-button-behaviors.js => behaviors.js} |   0
 packages/button/index.js                      |  70 +++--
 packages/button/index.json                    |   5 +-
 packages/button/index.pcss                    | 284 ++++++++----------
 packages/button/index.wxml                    |   5 +-
 packages/common/_var.pcss                     |  10 +-
 packages/common/classnames.js                 |  29 ++
 packages/common/var.pcss                      |  35 +++
 33 files changed, 403 insertions(+), 457 deletions(-)
 delete mode 100644 dist/btn-group/index.js
 delete mode 100644 dist/btn-group/index.wxml
 delete mode 100644 dist/btn-group/index.wxss
 create mode 100644 example/components/demo-block/index.js
 rename {dist/btn-group => example/components/demo-block}/index.json (100%)
 create mode 100644 example/components/demo-block/index.wxml
 create mode 100644 example/components/demo-block/index.wxss
 create mode 100644 example/pages/button/index.wxss
 delete mode 100644 packages/button-group/index.js
 delete mode 100644 packages/button-group/index.json
 delete mode 100644 packages/button-group/index.wxml
 delete mode 100644 packages/button-group/index.wxss
 rename packages/button/{native-button-behaviors.js => behaviors.js} (100%)
 create mode 100644 packages/common/classnames.js
 create mode 100644 packages/common/var.pcss

diff --git a/dist/btn-group/index.js b/dist/btn-group/index.js
deleted file mode 100644
index c8965284..00000000
--- a/dist/btn-group/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict';
-
-Component({
-  relations: {
-    '../button/index': {
-      type: 'child',
-      linked: function linked() {
-        updateBtnChild.call(this);
-      },
-      linkChange: function linkChange() {
-        updateBtnChild.call(this);
-      },
-      unlinked: function unlinked() {
-        updateBtnChild.call(this);
-      }
-    }
-  }
-});
-
-function updateBtnChild() {
-  var buttons = this.getRelationNodes('../button/index');
-
-  if (buttons.length > 0) {
-    var lastIndex = buttons.length - 1;
-
-    buttons.forEach(function (button, index) {
-      button.switchLastButtonStatus(index === lastIndex);
-    });
-  }
-}
\ No newline at end of file
diff --git a/dist/btn-group/index.wxml b/dist/btn-group/index.wxml
deleted file mode 100644
index 0dd98c36..00000000
--- a/dist/btn-group/index.wxml
+++ /dev/null
@@ -1,3 +0,0 @@
-<view class="button-group">
-  <slot></slot>
-</view>
diff --git a/dist/btn-group/index.wxss b/dist/btn-group/index.wxss
deleted file mode 100644
index ff9785d2..00000000
--- a/dist/btn-group/index.wxss
+++ /dev/null
@@ -1,3 +0,0 @@
-.button-group {
-  margin: 15px;
-}
diff --git a/example/app.wxss b/example/app.wxss
index cba0c690..ef0a11f7 100644
--- a/example/app.wxss
+++ b/example/app.wxss
@@ -5,7 +5,16 @@ page {
   background: #f8f8f8;
   min-height: 100vh;
   box-sizing: border-box;
-  padding: 15rpx 0;
+  padding: 0 0 100rpx;
   -webkit-font-smoothing: antialiased;
   font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
 }
+
+.demo-margin-right {
+  margin-right: 15px;
+}
+
+.demo-margin-bottom {
+  display: block;
+  margin-bottom: 15px;
+}
diff --git a/example/components/demo-block/index.js b/example/components/demo-block/index.js
new file mode 100644
index 00000000..908a07be
--- /dev/null
+++ b/example/components/demo-block/index.js
@@ -0,0 +1,5 @@
+Component({
+  properties: {
+    title: String
+  }
+});
diff --git a/dist/btn-group/index.json b/example/components/demo-block/index.json
similarity index 100%
rename from dist/btn-group/index.json
rename to example/components/demo-block/index.json
diff --git a/example/components/demo-block/index.wxml b/example/components/demo-block/index.wxml
new file mode 100644
index 00000000..2a4bff8d
--- /dev/null
+++ b/example/components/demo-block/index.wxml
@@ -0,0 +1,4 @@
+<view class="demo-block">
+  <view wx:if="{{ title }}" class="demo-block__title">{{ title }}</view>
+  <slot />
+</view>
diff --git a/example/components/demo-block/index.wxss b/example/components/demo-block/index.wxss
new file mode 100644
index 00000000..5408971c
--- /dev/null
+++ b/example/components/demo-block/index.wxss
@@ -0,0 +1,11 @@
+.demo-block {
+  padding: 0 15px;
+}
+
+.demo-block__title {
+  margin: 0;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(69,90,100,.6);
+  padding: 20px 0 15px;
+}
diff --git a/example/pages/button/index.js b/example/pages/button/index.js
index a697c742..560d44d4 100644
--- a/example/pages/button/index.js
+++ b/example/pages/button/index.js
@@ -1,15 +1 @@
-Page({
-  data: {
-  },
-
-  onLoad() {
-
-  },
-
-  onShow() {
-  },
-
-  getPhoneNumber(e) {
-    console.log(e);
-  }
-});
+Page({});
diff --git a/example/pages/button/index.json b/example/pages/button/index.json
index 0fb23285..bd094653 100644
--- a/example/pages/button/index.json
+++ b/example/pages/button/index.json
@@ -1,8 +1,8 @@
 {
   "navigationBarTitleText": "Button 按钮",
   "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
     "van-button": "../../dist/button/index",
-    "van-button-group": "../../dist/button-group/index",
     "van-panel": "../../dist/panel/index"
   }
 }
diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
index ede61a1d..ff534549 100644
--- a/example/pages/button/index.wxml
+++ b/example/pages/button/index.wxml
@@ -1,51 +1,29 @@
-<van-panel title="普通按钮">
-  <van-button-group>
-    <van-button
-      open-type="getPhoneNumber"
-      bind:getphonenumber="getPhoneNumber"
-    >获取电话</van-button>
-    <van-button type="primary">确认付款</van-button>
-    <van-button type="danger">确认付款</van-button>
-    <van-button type="warn">确认付款</van-button>
-  </van-button-group>
-</van-panel>
+<demo-section>
+  <demo-block title="按钮类型">
+    <van-button type="default" custom-class="demo-margin-right">默认按钮</van-button>
+    <van-button type="primary" custom-class="demo-margin-right">主要按钮</van-button>
+    <van-button type="danger">危险按钮</van-button>
+  </demo-block>
 
-<van-panel title="大号按钮，没有边框线及圆角">
-  <van-button size="large" type="primary">确认付款</van-button>
-  <van-button size="large" type="warn">立即购买</van-button>
-  <van-button size="large" type="danger">立即购买</van-button>
-</van-panel>
+  <demo-block title="朴素按钮">
+    <van-button type="default" plain custom-class="demo-margin-right">默认按钮</van-button>
+    <van-button type="primary" plain custom-class="demo-margin-right">主要按钮</van-button>
+    <van-button type="danger" plain>危险按钮</van-button>
+  </demo-block>
 
-<van-panel title="小号按钮">
-  <van-button-group>
-    <van-button size="small">取消订单</van-button>
-    <van-button size="small" type="primary">确认付款</van-button>
-  </van-button-group>
-</van-panel>
+  <demo-block title="按钮尺寸">
+    <van-button size="large" block custom-class="demo-margin-bottom">大号按钮</van-button>
+    <van-button size="normal" class="demo-margin-right">普通按钮</van-button>
+    <van-button size="small" class="demo-margin-right">小型按钮</van-button>
+    <van-button size="mini">迷你按钮</van-button>
+  </demo-block>
 
-<van-panel title="迷你按钮">
-  <van-button-group>
-    <van-button size="mini">取消订单</van-button>
-    <van-button size="mini" type="primary">确认付款</van-button>
-    <van-button size="mini" type="warn">确认付款</van-button>
-    <van-button size="mini" type="danger">确认付款</van-button>
-  </van-button-group>
-</van-panel>
+  <demo-block title="禁用状态">
+    <van-button disabled>禁用状态</van-button>
+  </demo-block>
 
-<van-panel title="Loading">
-  <van-button-group>
-    <van-button loading>取消订单</van-button>
-    <van-button loading type="primary">确认付款</van-button>
-    <van-button loading type="danger">确认付款</van-button>
-    <van-button loading type="warn">确认付款</van-button>
-  </van-button-group>
-</van-panel>
-
-<van-panel title="Disabled">
-  <van-button-group>
-    <van-button disabled>取消订单</van-button>
-    <van-button disabled type="primary">确认付款</van-button>
-    <van-button disabled type="danger">确认付款</van-button>
-    <van-button disabled type="warn">确认付款</van-button>
-  </van-button-group>
-</van-panel>
+  <demo-block title="加载状态">
+    <van-button loading custom-class="demo-margin-right" />
+    <van-button loading type="primary" />
+  </demo-block>
+</demo-section>
diff --git a/example/pages/button/index.wxss b/example/pages/button/index.wxss
new file mode 100644
index 00000000..e69de29b
diff --git a/example/pages/dialog/index.json b/example/pages/dialog/index.json
index efddf114..5901434a 100644
--- a/example/pages/dialog/index.json
+++ b/example/pages/dialog/index.json
@@ -3,7 +3,6 @@
   "usingComponents": {
     "van-dialog": "../../dist/dialog/index",
     "van-button": "../../dist/button/index",
-    "van-button-group": "../../dist/button-group/index",
     "van-toast": "../../dist/toast/index"
   }  
 }
diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml
index 43ee6c00..5d8ceb57 100644
--- a/example/pages/dialog/index.wxml
+++ b/example/pages/dialog/index.wxml
@@ -1,11 +1,11 @@
-<van-button-group style="margin-top: 30vh; display: block;">
-  <van-button bindtap="toggleBaseDialog">基础 Dialog</van-button>
-  <van-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</van-button>
-  <van-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</van-button>
-  <van-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</van-button>
-  <van-button bindtap="toggleOpenDialog">Dialog - 获取 Open 数据的弹窗</van-button>
-  <van-button bindtap="toggleCloseDialog">Dialog - 控制弹窗关闭</van-button>
-</van-button-group>
+
+<van-button bindtap="toggleBaseDialog">基础 Dialog</van-button>
+<van-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</van-button>
+<van-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</van-button>
+<van-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</van-button>
+<van-button bindtap="toggleOpenDialog">Dialog - 获取 Open 数据的弹窗</van-button>
+<van-button bindtap="toggleCloseDialog">Dialog - 控制弹窗关闭</van-button>
+
 
 <van-dialog id="van-base-dialog"></van-dialog>
 <van-dialog id="van-no-title-dialog"></van-dialog>
diff --git a/example/pages/field/index.json b/example/pages/field/index.json
index fc72f278..d88f1555 100644
--- a/example/pages/field/index.json
+++ b/example/pages/field/index.json
@@ -2,7 +2,6 @@
   "navigationBarTitleText": "Field 输入框",
   "usingComponents": {
     "van-button": "../../dist/button/index",
-    "van-button-group": "../../dist/button-group/index",
     "van-cell-group": "../../dist/cell-group/index",
     "van-field": "../../dist/field/index",
     "van-panel": "../../dist/panel/index"
diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml
index bb26e1ab..9586eb80 100644
--- a/example/pages/field/index.wxml
+++ b/example/pages/field/index.wxml
@@ -31,9 +31,7 @@
   </van-cell-group>
 </van-panel>
 
-<van-button-group>
-  <van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
-</van-button-group>
+<van-button type="primary" bind:buttonclick="clearInput">清除输入</van-button>
 
 <!-- 去除标题后的输入框样式 -->
 <van-panel title="无标题输入框">
@@ -44,9 +42,7 @@
   </van-field>
 </van-panel>
 
-<van-button-group>
-  <van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
-</van-button-group>
+<van-button type="primary" bind:buttonclick="clearTextarea">清除输入</van-button>
 
 <!-- 使用 Field 圆角样式 -->
 <van-panel title="圆角输入框">
diff --git a/example/pages/popup/index.json b/example/pages/popup/index.json
index 867095f5..b1f3aa4c 100644
--- a/example/pages/popup/index.json
+++ b/example/pages/popup/index.json
@@ -2,8 +2,7 @@
   "navigationBarTitleText": "Popup 弹出层",
   "usingComponents": {
     "van-popup": "../../dist/popup/index",
-    "van-button": "../../dist/button/index",
-    "van-button-group": "../../dist/button-group/index"
+    "van-button": "../../dist/button/index"
   }  
 }
 
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index 6610a64b..d5eb96f0 100644
--- a/example/pages/popup/index.wxml
+++ b/example/pages/popup/index.wxml
@@ -1,20 +1,18 @@
-<van-button-group style="margin-top: 10vh;display: block;">
-  <van-button class="van-button" bind:buttonclick="togglePopup">
-    弹出popup
-  </van-button>
-  <van-button class="van-button" bind:buttonclick="toggleTopPopup">
-    从顶部弹出popup
-  </van-button>
-  <van-button class="van-button" bind:buttonclick="toggleBottomPopup">
-    从底部弹出popup
-  </van-button>
-  <van-button class="van-button" bind:buttonclick="toggleLeftPopup">
-    从左边弹出popup
-  </van-button>
-  <van-button class="van-button" bind:buttonclick="toggleRightPopup">
-    从右边弹出popup
-  </van-button>
-</van-button-group>
+<van-button class="van-button" bind:buttonclick="togglePopup">
+  弹出popup
+</van-button>
+<van-button class="van-button" bind:buttonclick="toggleTopPopup">
+  从顶部弹出popup
+</van-button>
+<van-button class="van-button" bind:buttonclick="toggleBottomPopup">
+  从底部弹出popup
+</van-button>
+<van-button class="van-button" bind:buttonclick="toggleLeftPopup">
+  从左边弹出popup
+</van-button>
+<van-button class="van-button" bind:buttonclick="toggleRightPopup">
+  从右边弹出popup
+</van-button>
 
 <!-- 中间弹出框 -->
 <van-popup
diff --git a/example/pages/toast/index.json b/example/pages/toast/index.json
index b3b0154b..03b83c10 100644
--- a/example/pages/toast/index.json
+++ b/example/pages/toast/index.json
@@ -2,7 +2,6 @@
   "navigationBarTitleText": "Toast 轻提示",
   "usingComponents": {
     "van-button": "../../dist/button/index",
-    "van-button-group": "../../dist/button-group/index",
     "van-toast": "../../dist/toast/index"
   }
 }
diff --git a/example/pages/toast/index.wxml b/example/pages/toast/index.wxml
index 09661ad0..754c8829 100644
--- a/example/pages/toast/index.wxml
+++ b/example/pages/toast/index.wxml
@@ -1,36 +1,33 @@
 <import src="/dist/toast/index.wxml" />
 
 <view class="container">
+  <van-button bind:buttonclick="showToast">
+    显示toast
+  </van-button>
 
-  <van-button-group style="margin-top: 15vh;display: block;">
-    <van-button bind:buttonclick="showToast">
-      显示toast
-    </van-button>
+  <van-button bind:buttonclick="showIconToast">
+    显示 Icon 图标的toast
+  </van-button>
 
-    <van-button bind:buttonclick="showIconToast">
-      显示 Icon 图标的toast
-    </van-button>
+  <van-button bind:buttonclick="showImageToast">
+    自定义图片作为图标的toast
+  </van-button>
 
-    <van-button bind:buttonclick="showImageToast">
-      自定义图片作为图标的toast
-    </van-button>
+  <van-button bind:buttonclick="showLoadingToast">
+    显示 Loading toast
+  </van-button>
 
-    <van-button bind:buttonclick="showLoadingToast">
-      显示 Loading toast
-    </van-button>
+  <van-button bind:buttonclick="showOnlyIcon">
+    只显示图标的toast
+  </van-button>
 
-    <van-button bind:buttonclick="showOnlyIcon">
-      只显示图标的toast
-    </van-button>
+  <van-button bind:buttonclick="showEverToast">
+    不消失的的toast
+  </van-button>
 
-    <van-button bind:buttonclick="showEverToast">
-      不消失的的toast
-    </van-button>
-
-    <van-button bind:buttonclick="showLoading">
-      显示 Loading
-    </van-button>
-  </van-button-group>
+  <van-button bind:buttonclick="showLoading">
+    显示 Loading
+  </van-button>
 </view>
 
 <!-- <template is="van-toast" data="{{ zanToast }}"></template> -->
diff --git a/packages/button-group/index.js b/packages/button-group/index.js
deleted file mode 100644
index 724e7228..00000000
--- a/packages/button-group/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-Component({
-  relations: {
-    '../button/index': {
-      type: 'child',
-      linked() {
-        updateBtnChild.call(this);
-      },
-      linkChange() {
-        updateBtnChild.call(this);
-      },
-      unlinked() {
-        updateBtnChild.call(this);
-      }
-    }
-  }
-});
-
-function updateBtnChild() {
-  let buttons = this.getRelationNodes('../button/index');
-
-  if (buttons.length > 0) {
-    let lastIndex = buttons.length - 1;
-
-    buttons.forEach((button, index) => {
-      button.switchLastButtonStatus(index === lastIndex);
-    });
-  }
-}
diff --git a/packages/button-group/index.json b/packages/button-group/index.json
deleted file mode 100644
index 467ce294..00000000
--- a/packages/button-group/index.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "component": true
-}
diff --git a/packages/button-group/index.wxml b/packages/button-group/index.wxml
deleted file mode 100644
index 0dd98c36..00000000
--- a/packages/button-group/index.wxml
+++ /dev/null
@@ -1,3 +0,0 @@
-<view class="button-group">
-  <slot></slot>
-</view>
diff --git a/packages/button-group/index.wxss b/packages/button-group/index.wxss
deleted file mode 100644
index ff9785d2..00000000
--- a/packages/button-group/index.wxss
+++ /dev/null
@@ -1,3 +0,0 @@
-.button-group {
-  margin: 15px;
-}
diff --git a/packages/button/README.md b/packages/button/README.md
index 685a3183..eeaf7617 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -10,89 +10,74 @@
 
 ### 代码演示
 
-#### 基础用法
-```html
-<van-button>取消订单</van-button>
-```
-
 #### 按钮类型
-按钮支持额外的三种类型 primary, danger, warn
+支持`default`、`primary`、`danger`三种类型，默认为`default`
+
 ```html
-<van-button type="primary">确认付款</van-button>
-<van-button type="danger">确认付款</van-button>
-<van-button type="warn">确认付款</van-button>
+<van-button type="default">默认按钮</van-button>
+<van-button type="primary">主要按钮</van-button>
+<van-button type="danger">危险按钮</van-button>
 ```
 
-#### 按钮大小
-按钮支持额外三种大小 large, small, mini
+#### 朴素按钮
+
 ```html
-<van-button size="large">确认付款</van-button>
-<van-button size="small">取消订单</van-button>
-<van-button size="mini">确认付款</van-button>
+<van-button type="default" plain>默认按钮</van-button>
+<van-button type="primary" plain>主要按钮</van-button>
+<van-button type="danger" plain>危险按钮</van-button>
 ```
 
-#### 其他
-按钮镂空状态
+#### 按钮尺寸
+支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
+
+```html 
+<van-button size="large">大号按钮</van-button>
+<van-button size="normal">普通按钮</van-button>
+<van-button size="small">小型按钮</van-button>
+<van-button size="mini">迷你按钮</van-button>
+```
+
+#### 禁用状态
+通过`disabled`属性来禁用按钮，此时按钮不可点击
+
 ```html
-<van-button plain>确认付款</van-button>
+<van-button disabled>禁用状态</van-button>
 ```
 
-按钮加载状态
-```html
-<van-button loading>确认付款</van-button>
-```
+#### 加载状态
 
-按钮禁用状态
-```html
-<van-button disabled>确认付款</van-button>
+```html 
+<van-button loading />
+<van-button loading type="primary" />
 ```
 
-### 配合 button-group 使用
-通过配合 van-button-group 使用，可以让按钮之间自动有合适的间距出现，使用方式如下
-
-1.在 json 文件中配置 button-group 组件
-```json
-"usingComponents": {
-  "van-button": "path/to/vant-weapp/dist/button/index",
-  "van-button-group": "path/to/vant-weapp/dist/button-group/index"
-}
-```
-2.在 wxml 中直接引入
-```html
-<van-button-group>
-  <van-button>确认付款</van-button>
-  <van-button>再考虑下</van-button>
-</van-button-group>
-```
-
-![](https://img.yzcdn.cn/public_files/2017/02/08/1b1e39ed3dc6b63519a68ba1e2650cfc.png)
-
 ### 属性
 
-| 名称     | 类型    | 是否必须  | 默认  | 描述   |
-|---------|---------|----------|------|-------|
-| type    | String  | 否       | 空 | 按钮类型，值有primary、warn、danger |
-| size    | String  | 否       | 空 | 按钮大小，值有large、small、mini |
-| plain   | Boolean | 否       | false | 按钮是否镂空，默认为false |
-| disabled | Boolean | 否      | false | 按钮是否禁用，默认为false |
-| loading | Boolean | 否       | false | 按钮加载状态，默认为false |
-| openType | String | 否       | - | 微信开放能力 |
-| appParameter | String | 否   | - | 打开 APP 时，向 APP 传递的参数 |
-| hoverStartTime | Number | 否   | 20 | 按住后多久出现点击态，单位毫秒	 |
-| hoverStayTime | Number | 否   | 70 | 手指松开后点击态保留时间，单位毫秒	 |
-| lang | String | 否   | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 |
-| sessionFrom | String | 否   | - | 会话来源 |
-| sendMessageTitle | String | 否   | 当前标题 | 会话内消息卡片标题 |
-| sendMessagePath | String | 否   | 当前分享路径 | 会话内消息卡片点击跳转小程序路径	 |
-| sendMessageImg | String | 否   | 截图 | 会话内消息卡片图片 |
-| showMessageCard | String | 否   | false | 显示会话内消息卡片 |
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` |
+| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
+| plain | 是否为朴素按钮 | `Boolean` | `false` |
+| disabled | 是否禁用 | `Boolean` | `false` |
+| loading | 是否显示为加载状态 | `Boolean` | `false` |
+| block | 是否为块级元素 | `Boolean` | `false` |
+| open-type | 微信开放能力 | `String` | - |
+| app-parameter | 打开 APP 时，向 APP 传递的参数 | `String` | - |
+| hover-start-time | 按住后多久出现点击态，单位毫秒 | `Number` | 20 |
+| hover-stay-time | 手指松开后点击态保留时间，单位毫秒 | `Number` | 70 |
+| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | `String` | `en` |
+| session-from | 会话来源 | `String` | - |
+| send-message-title | 会话内消息卡片标题 | `String` | 当前标题 |
+| send-message-path | 会话内消息卡片点击跳转小程序路径 | `String` | 当前分享路径 |
+| send-message-img | sendMessageImg | `String` | 截图 |
+| show-message-card | 显示会话内消息卡片 | `String` | `false` |
 
 ### 事件
-| 事件名称       | 说明      | 回调参数       |
+
+| 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-|  buttonclick  | 按钮在可用状态被点击时触发 | |
-|  disabledclick  | 在传入的 disabled 为 true 时，点击按钮会触发此事件 | |
-|  getuserinfo  | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo | |
-|  contact  | 客服消息回调 | |
-|  getphonenumber  | 获取用户手机号回调 | |
-|  error  | 当使用开放能力时，发生错误的回调 | |
+| click | 点击按钮且按钮状态不为加载或禁用时触发 | - |
+| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
+| contact | 客服消息回调 | - |
+| getphonenumber | 获取用户手机号回调 | - |
+| error | 当使用开放能力时，发生错误的回调 | - |
diff --git a/packages/button/native-button-behaviors.js b/packages/button/behaviors.js
similarity index 100%
rename from packages/button/native-button-behaviors.js
rename to packages/button/behaviors.js
diff --git a/packages/button/index.js b/packages/button/index.js
index 65a0bc71..5e0ed6f5 100644
--- a/packages/button/index.js
+++ b/packages/button/index.js
@@ -1,58 +1,78 @@
-const nativeButtonBehavior = require('./native-button-behaviors');
+const nativeBehaviors = require('./behaviors');
+const classnames = require('../common/classnames');
+
+const observer = function () {
+  this.setClasses();
+};
 
 Component({
-  externalClasses: ['custom-class', 'theme-class'],
-  behaviors: [nativeButtonBehavior],
-  relations: {
-    '../button-group/index': {
-      type: 'parent',
-      linked() {
-        this.setData({ inGroup: true });
-      },
-      unlinked() {
-        this.setData({ inGroup: false });
-      }
-    }
-  },
+  externalClasses: ['custom-class'],
+
+  behaviors: [nativeBehaviors],
+
   properties: {
     type: {
       type: String,
-      value: '',
+      value: 'default',
+      observer
     },
     size: {
       type: String,
-      value: '',
+      value: 'normal',
+      observer
     },
     plain: {
       type: Boolean,
       value: false,
+      observer
     },
     disabled: {
       type: Boolean,
       value: false,
+      observer
     },
     loading: {
       type: Boolean,
       value: false,
+      observer
+    },
+    block: {
+      type: Boolean,
+      value: false,
+      observer
     }
   },
 
   data: {
-    inGroup: false,
-    isLast: false
+    classes: ''
+  },
+
+  attached() {
+    this.setClasses();
   },
 
   methods: {
-    handleTap() {
-      if (this.data.disabled) {
-        this.triggerEvent('disabledclick');
-        return;
+    onTap(event) {
+      if (!this.data.disabled && !this.data.loading) {
+        this.triggerEvent('click', event);
       }
-      this.triggerEvent('buttonclick');
     },
 
-    switchLastButtonStatus(isLast = false) {
-      this.setData({ isLast });
+    setClasses() {
+      const { type, size, plain, disabled, loading, block } = this.data;
+      this.setData({
+        classes: classnames(
+          `van-button--${type}`,
+          `van-button--${size}`,
+          {
+            'van-button--block': block,
+            'van-button--plain': plain,
+            'van-button--loading': loading,
+            'van-button--disabled': disabled,
+            'van-button--unclickable': disabled || loading
+          }
+        )
+      });
     }
   }
 });
diff --git a/packages/button/index.json b/packages/button/index.json
index 32640e0d..cae21702 100644
--- a/packages/button/index.json
+++ b/packages/button/index.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-loading": "../loading/index"
+  }
 }
\ No newline at end of file
diff --git a/packages/button/index.pcss b/packages/button/index.pcss
index 37180a0b..853d3eb1 100644
--- a/packages/button/index.pcss
+++ b/packages/button/index.pcss
@@ -1,169 +1,135 @@
-@import "../common/_mixins";
+@import '../common/var.pcss';
 
 .van-button {
   position: relative;
-  color: #333;
-  background-color: #fff;
-  padding-left: 15px;
-  padding-right: 15px;
-  border-radius: 2px;
-  font-size: 16px;
-  line-height: 45px;
+  padding: 0;
+  display: inline-block;
   height: 45px;
+  line-height: 43px;
+  border-radius: 3px;
   box-sizing: border-box;
-  text-decoration: none;
+  font-size: 16px;
   text-align: center;
-  vertical-align: middle;
-  overflow: visible;
-}
-
-.van-button--group {
-  margin-bottom: 10px;
-}
-
-.van-button::after {
-  @mixin hairline;
-  border-width: 1px;
-  border-radius: 4px;
-}
-
-/* type */
-.van-button--primary {
-  color: #fff;
-  background-color: #4b0;
+  -webkit-appearance: none;
 
   &::after {
-    border-color: #0a0;
+    content: " ";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    border-color: $black;
+    background-color: $black;
+    border-radius: inherit; /* inherit parent's border radius */
+    transform: translate(-50%, -50%);
+  }
+
+  &:active::after {
+    opacity: .3;
+  }
+
+  &--unclickable::after {
+    display: none;
+  }
+
+  &--default {
+    color: $button-default-color;
+    background-color: $button-default-background-color;
+    border: 1px solid $button-default-border-color;
+  }
+
+  &--primary {
+    color: $button-primary-color;
+    background-color: $button-primary-background-color;
+    border: 1px solid $button-primary-border-color;
+  }
+
+  &--danger {
+    color: $button-danger-color;
+    background-color: $button-danger-background-color;
+    border: 1px solid $button-danger-border-color;
+  }
+
+  &--plain {
+    background-color: $white;
+
+    &.van-button--primary {
+      color: $button-primary-background-color;
+    }
+
+    &.van-button--danger {
+      color: $button-danger-background-color;
+    }
+  }
+
+  &--large {
+    width: 100%;
+    height: 50px;
+    line-height: 48px;
+  }
+
+  &--normal {
+    padding: 0 15px;
+    font-size: 14px;
+  }
+
+  &--small {
+    height: 30px;
+    padding: 0 8px;
+    min-width: 60px;
+    font-size: 12px;
+    line-height: 28px;
+  }
+
+  &--loading {
+    .van-loading {
+      display: inline-block;
+    }
+
+    .van-button__text {
+      display: none;
+    }
+  }
+
+  /* mini图标默认宽度50px，文字不能超过4个 */
+  &--mini {
+    display: inline-block;
+    width: 50px;
+    height: 22px;
+    line-height: 20px;
+    font-size: 10px;
+
+    & + .van-button--mini {
+      margin-left: 5px;
+    }
+  }
+
+  &--block {
+    width: 100%;
+    display: block;
+  }
+
+  &--bottom-action {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    border: 0;
+    border-radius: 0;
+    font-size: 16px;
+    color: $button-bottom-action-default-color;
+    background-color: $button-bottom-action-default-background-color;
+
+    &.van-button--primary {
+      background-color: $button-bottom-action-primary-background-color;
+    }
+  }
+
+  &--disabled {
+    color: $button-disabled-color;
+    background-color: $button-disabled-background-color;
+    border: 1px solid $button-disabled-border-color;
   }
 }
-
-.van-button--warn {
-  color: #fff;
-  background-color: #f85;
-
-  &::after {
-    border-color: #f85;
-  }
-}
-
-.van-button--danger {
-  color: #fff;
-  background-color: #f44;
-
-  &::after {
-    border-color: #e33;
-  }
-}
-
-/* size */
-.van-button--small {
-  display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  font-size: 12px;
-  /* margin-right: 5px; */
-}
-.van-button--small.van-button--group {
-  margin-bottom: 0;
-  margin-right: 5px;
-}
-
-.van-button--mini {
-  display: inline-block;
-  line-height: 21px;
-  height: 22px;
-  font-size: 10px;
-  /* margin-right: 5px; */
-  padding-left: 5px;
-  padding-right: 5px;
-}
-.van-button--mini.van-button--group {
-  margin-bottom: 0;
-  margin-right: 5px;
-}
-
-.van-button--large {
-  border-radius: 0;
-  border: none;
-  line-height: 50px;
-  height: 50px;
-}
-.van-button--large.van-button--group {
-  margin-bottom: 0;
-}
-
-/* plain */
-.van-button--plain.van-button {
-  background-color: transparent;
-}
-.van-button--plain.van-button--primary {
-  color: #06BF04;
-}
-.van-button--plain.van-button--warn {
-  color: #FF6600;
-}
-.van-button--plain.van-button--danger {
-  color: #FF4444;
-}
-
-/* 重写button组件的button-hover样式 */
-.button-hover {
-  opacity: 0.9;
-}
-
-/* loading */
-.van-button--loading {
-  color: transparent;
-  opacity: 1;
-}
-.van-button--loading::before {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  content: ' ';
-  width: 16px;
-  height: 16px;
-  margin-left: -8px;
-  margin-top: -8px;
-  border: 3px solid #e5e5e5;
-  border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
-  border-radius: 8px;
-  box-sizing: border-box;
-  animation: button-spin 0.6s linear;
-  animation-iteration-count: infinite;
-}
-.van-button--primary.van-button--loading::before,
-.van-button--warn.van-button--loading::before,
-.van-button--danger.van-button--loading::before {
-  border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
-}
-
-@keyframes button-spin {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* disabled */
-.van-button.van-button--disabled {
-  /* 防止样式被 button[disabled] 的规则覆盖，所以使用了important */
-  color: #999 ! important;
-  background: #f8f8f8 ! important;
-  border-color: #e5e5e5 ! important;
-  cursor: not-allowed ! important;
-  opacity: 1 ! important;
-
-  &::after {
-    border-color: #e5e5e5 ! important;
-  }
-}
-
-/* :last-child */
-.van-button--group.van-button--last {
-  margin-bottom: 0;
-  margin-right: 0;
-}
-
diff --git a/packages/button/index.wxml b/packages/button/index.wxml
index 0290c18a..8c6813c6 100644
--- a/packages/button/index.wxml
+++ b/packages/button/index.wxml
@@ -1,5 +1,5 @@
 <button
-  class="custom-class theme-class van-button {{ inGroup ? 'van-button--group' : '' }} {{ isLast ? 'van-button--last' : '' }} {{size ? 'van-button--'+size : ''}} {{size === 'mini' ? 'van-button--plain' : ''}} {{plain ? 'van-button--plain' : ''}} {{type ? 'van-button--'+type : ''}} {{loading ? 'van-button--loading' : ''}} {{disabled ? 'van-button--disabled' : ''}}"
+  class="custom-class van-button {{ classes }}"
   disabled="{{ disabled }}"
   hover-class="button-hover"
   open-type="{{ openType }}"
@@ -13,12 +13,13 @@
   send-message-path="{{ sendMessagePath }}"
   send-message-img="{{ sendMessageImg }}"
   show-message-card="{{ showMessageCard }}"
-  bindtap="handleTap"
+  bindtap="onTap"
   bindcontact="bindcontact"
   bindgetuserinfo="bindgetuserinfo"
   bindgetphonenumber="bindgetphonenumber"
   binderror="binderror"
   bindopensetting="bindopensetting"
 >
+  <van-loading wx:if="{{ loading }}" color="{{ type === 'default' ? 'black' : 'white' }}" />
   <slot></slot>
 </button>
diff --git a/packages/common/_var.pcss b/packages/common/_var.pcss
index 79488fd1..82e6ac09 100644
--- a/packages/common/_var.pcss
+++ b/packages/common/_var.pcss
@@ -12,22 +12,22 @@ $gray-dark: #999;
 
 /* default colors */
 $text-color: #333;
-$border-color: #ccc;
+$border-color: $gray-light;
 $active-color: #e8e8e8;
 $background-color: #f8f8f8;
 
 /* button */
 $button-default-color: $text-color;
 $button-default-background-color: $white;
-$button-default-border-color: $gray-light;
+$button-default-border-color: $border-color;
 $button-primary-color: $white;
 $button-primary-background-color: #4b0;
-$button-primary-border-color: #0a0;
+$button-primary-border-color: #4b0;
 $button-danger-color: $white;
 $button-danger-background-color: $red;
-$button-danger-border-color: #e33;
+$button-danger-border-color: $red;
 $button-disabled-color: $gray-dark;
-$button-disabled-background-color: $gray-light;
+$button-disabled-background-color: $active-color;
 $button-disabled-border-color: $border-color;
 $button-bottom-action-default-color: $white;
 $button-bottom-action-default-background-color: #f85;
diff --git a/packages/common/classnames.js b/packages/common/classnames.js
new file mode 100644
index 00000000..71c74a3e
--- /dev/null
+++ b/packages/common/classnames.js
@@ -0,0 +1,29 @@
+const hasOwn = {}.hasOwnProperty;
+
+module.exports = function classNames() {
+  const classes = [];
+
+  for (let i = 0; i < arguments.length; i++) {
+    const arg = arguments[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg) && arg.length) {
+      const inner = classNames.apply(null, arg);
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (const key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+};
diff --git a/packages/common/var.pcss b/packages/common/var.pcss
new file mode 100644
index 00000000..82e6ac09
--- /dev/null
+++ b/packages/common/var.pcss
@@ -0,0 +1,35 @@
+/* color variables */
+$black: #000;
+$white: #fff;
+$red: #f44;
+$blue: #38f;
+$orange: #f60;
+$green: #06bf04;
+$gray: #c9c9c9;
+$gray-light: #e5e5e5;
+$gray-darker: #666;
+$gray-dark: #999;
+
+/* default colors */
+$text-color: #333;
+$border-color: $gray-light;
+$active-color: #e8e8e8;
+$background-color: #f8f8f8;
+
+/* button */
+$button-default-color: $text-color;
+$button-default-background-color: $white;
+$button-default-border-color: $border-color;
+$button-primary-color: $white;
+$button-primary-background-color: #4b0;
+$button-primary-border-color: #4b0;
+$button-danger-color: $white;
+$button-danger-background-color: $red;
+$button-danger-border-color: $red;
+$button-disabled-color: $gray-dark;
+$button-disabled-background-color: $active-color;
+$button-disabled-border-color: $border-color;
+$button-bottom-action-default-color: $white;
+$button-bottom-action-default-background-color: #f85;
+$button-bottom-action-primary-color: $white;
+$button-bottom-action-primary-background-color: $red;