From 1e474244cae783d22abeb577993ee9d4d89eff6a Mon Sep 17 00:00:00 2001
From: niunai <colonD.wny@gmail.com>
Date: Thu, 24 Aug 2017 00:15:49 +0800
Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddatetime-pick?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=80=BC=E4=B8=8D=E7=94=9F=E6=95=88=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/examples-docs/datetime-picker.md         | 36 ++++++++-----------
 packages/datetime-picker/index.js             |  4 +--
 .../datetime-picker/src/datetime-picker.vue   |  4 +++
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md
index 1d90f56c3..f7c633f46 100644
--- a/docs/examples-docs/datetime-picker.md
+++ b/docs/examples-docs/datetime-picker.md
@@ -5,15 +5,16 @@ export default {
       minHour: 10,
       maxHour: 20,
       minDate: new Date(),
-      currentDate1: null,
+      maxDate: new Date(2019, 10, 1),
+      currentDate1: new Date(2018, 0, 1),
       currentDate2: null,
       currentDate3: null
     };
   },
 
   methods: {
-    handlePickerChange(picker, values) {
-      console.log(values);
+    handlePickerChange(picker) {
+      console.log(picker);
     },
     handlePickerCancel() {
       console.log('picker cancel');
@@ -36,10 +37,10 @@ export default {
 <van-datetime-picker
   v-model="currentDate1"
   type="datetime"
-  format="yyyy.mm.dd hh时 mm分"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
+  :max-date="maxDate"
   @change="handlePickerChange">  
 </van-datetime-picker>
 
@@ -50,13 +51,14 @@ export default {
       minHour: 10,
       maxHour: 20,
       minDate: new Date(),
-      currentDate: null
+      maxDate: new Date(2019, 10, 1),
+      currentDate: new Date(2018, 0, 1)
     };
   },
 
   methods: {
-    handlePickerChange(picker, values) {
-      picker.setColumnValues(1, citys[values[0]]);
+    handlePickerChange(picker) {
+      console.log(picker);
     }
   }
 };
@@ -71,7 +73,6 @@ export default {
 <van-datetime-picker
   v-model="currentDate2"
   type="date"
-  format="yyyy.mm.dd hh时 mm分"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
@@ -87,7 +88,6 @@ export default {
 <van-datetime-picker
   v-model="currentDate3"
   type="time"
-  format="yyyy.mm.dd hh时 mm分"
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
@@ -102,19 +102,11 @@ export default {
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | visibileColumnCount | 每一列可见备选元素的个数 | Number  | 5 |   |
-| itemHeight | 选中元素区高度 | Number  | 44 |   |
-| columns | 对象数组，配置每一列显示的数据 | Array  |  |   |
-| showToolbar | 是否在组件顶部显示一个toolbar | Boolean  | true |   |
-
-### columns
-
-`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
-
-| key       | 说明      |
-|-----------|-----------|
-| values | 列中对应的备选值 |
-| defaultIndex | 初始选中值的索引，默认为0 |
-| className | 为对应列添加特殊的`class` |
+| type | 组件类型 | String  | 'datetime' |  'datetime', 'date', 'time' |
+| minDate | 可选的最小日期 | Date  | 十年前的 1 月 1 日 |   |
+| maxDate | 可选的最大日期 | Date  | 十年后的 12 月 31 日 |   |
+| minHour | 可选的最小小时 | Number  | 0 |   |
+| maxHour | 可选的最大小时 | Number  | 23 |   |
 
 ### Event
 
diff --git a/packages/datetime-picker/index.js b/packages/datetime-picker/index.js
index c6ad7f9b3..ca80ede95 100644
--- a/packages/datetime-picker/index.js
+++ b/packages/datetime-picker/index.js
@@ -1,3 +1,3 @@
-import DateTimePicker from './src/datetime-picker';
+import DatetimePicker from './src/datetime-picker';
 
-export default DateTimePicker;
+export default DatetimePicker;
diff --git a/packages/datetime-picker/src/datetime-picker.vue b/packages/datetime-picker/src/datetime-picker.vue
index 5569efd63..6dbadea55 100644
--- a/packages/datetime-picker/src/datetime-picker.vue
+++ b/packages/datetime-picker/src/datetime-picker.vue
@@ -285,6 +285,10 @@ export default {
       }
       [].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange());
     }
+  },
+
+  mounted() {
+    this.updateColumnValue(this.innerValue);
   }
 };
 </script>

From 8f3915f77c44c03be1bc0ddb168f024b17b7faea Mon Sep 17 00:00:00 2001
From: niunai <colonD.wny@gmail.com>
Date: Thu, 24 Aug 2017 00:28:16 +0800
Subject: [PATCH 02/16] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/datetime-picker/index.js | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 packages/datetime-picker/index.js

diff --git a/packages/datetime-picker/index.js b/packages/datetime-picker/index.js
deleted file mode 100644
index ca80ede95..000000000
--- a/packages/datetime-picker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import DatetimePicker from './src/datetime-picker';
-
-export default DatetimePicker;

From 6d0db7101001944500a55aaf3267cac991337f8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 09:57:58 +0800
Subject: [PATCH 03/16] [build] 0.8.6

---
 docs/examples-docs/changelog.md | 19 ++++++++++++++++++-
 packages/index.js               |  2 +-
 packages/vant-css/package.json  |  2 +-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/docs/examples-docs/changelog.md b/docs/examples-docs/changelog.md
index 368905d3f..545b0e180 100644
--- a/docs/examples-docs/changelog.md
+++ b/docs/examples-docs/changelog.md
@@ -1,9 +1,26 @@
 ## 更新日志
 
+## [v0.8.5](https://github.com/youzan/vant/tree/v0.8.5) (2017-08-21)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.8.4...v0.8.5)
+
+**非兼容更新和新特性:**
+
+- Doc: add usage guide && top progress [\#83](https://github.com/youzan/vant/pull/83) ([chenjiahan](https://github.com/chenjiahan))
+
+**修复:**
+
+- Popup: not preventScroll by default [\#84](https://github.com/youzan/vant/pull/84) ([chenjiahan](https://github.com/chenjiahan))
+- fix: swipe sometimes will change to drag image [\#81](https://github.com/youzan/vant/pull/81) ([pangxie1991](https://github.com/pangxie1991))
+
+**处理的 Issue:**
+
+- Href link does not work [\#82](https://github.com/youzan/vant/issues/82)
+- Swipe image not displayed [\#79](https://github.com/youzan/vant/issues/79)
+
 ## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
 [Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
 
-**合并的 Pull Request (可能有不兼容改动):**
+**修复:**
 
 - fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
 
diff --git a/packages/index.js b/packages/index.js
index faf9b07f6..3a1ca3699 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -37,7 +37,7 @@ import Swipe from './swipe';
 import SwipeItem from './swipe-item';
 import DatetimePicker from './datetime-picker';
 
-const version = '0.8.5';
+const version = '0.8.6';
 const components = [
   Button,
   Switch,
diff --git a/packages/vant-css/package.json b/packages/vant-css/package.json
index 36e96b762..d3dbbe043 100644
--- a/packages/vant-css/package.json
+++ b/packages/vant-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant-css",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "vant css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

From dbd35129792f6df554ac27c89c80fb0b1d8c10b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 09:57:58 +0800
Subject: [PATCH 04/16] [release] 0.8.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4beb3342a..706d14a9f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "有赞vue wap组件库",
   "main": "lib/vant.js",
   "style": "lib/vant-css/index.css",

From 99259a863f54a439572fb850b75c5bb9d515b06c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 14:25:22 +0800
Subject: [PATCH 05/16] Doc: add touch simulator

---
 docs/src/doc.config.js | 10 +++++-----
 docs/src/examples.js   |  1 +
 package.json           |  6 +++---
 yarn.lock              | 24 ++++++++++++------------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 110f0cadb..655038e57 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -26,21 +26,21 @@ module.exports = {
                 "title": "快速上手",
                 noExample: true
               },
+              {
+                "title": "业务组件",
+                "link": "/zanui/captain/component/quickstart"
+              },
               {
                 "path": "/changelog",
                 "title": "更新日志",
                 noExample: true
-              },
-              {
-                "title": "业务组件",
-                "link": "/zanui/captain/component/quickstart"
               }
             ]
           }
         ]
       },
       {
-        "name": "组件列表",
+        "name": "组件",
         "showInMobile": true,
         "groups": [
           {
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 73f943ae6..5126b64c3 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -5,6 +5,7 @@ import routes from './router.config';
 import ZanUI from 'packages/index';
 import ZanDoc from 'zan-doc';
 import 'packages/vant-css/src/index.css';
+import 'zan-doc/src/helper/touch-simulator';
 
 import DemoList from './components/demo-list.vue';
 
diff --git a/package.json b/package.json
index 706d14a9f..f6ff3a9f2 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.5",
     "eslint-plugin-vue": "^2.1.0",
-    "extract-text-webpack-plugin": "2.1.2",
+    "extract-text-webpack-plugin": "^3.0.0",
     "felint": "^0.5.0-alpha.3",
     "file-loader": "^0.11.2",
     "file-save": "^0.2.0",
@@ -108,7 +108,7 @@
     "vue": "^2.4.2",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^13.0.4",
-    "vue-markdown-loader": "^2.0.0",
+    "vue-markdown-loader": "^2.1.0",
     "vue-router": "^2.7.0",
     "vue-sfc-compiler": "^0.0.2",
     "vue-style-loader": "^3.0.0",
@@ -116,6 +116,6 @@
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.2.1"
+    "zan-doc": "^0.2.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index f546eae28..de34d1c02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -305,7 +305,7 @@ async@2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.2:
+async@^2.1.2, async@^2.4.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -2768,12 +2768,12 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c"
+extract-text-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
   dependencies:
-    async "^2.1.2"
-    loader-utils "^1.0.2"
+    async "^2.4.1"
+    loader-utils "^1.1.0"
     schema-utils "^0.3.0"
     webpack-sources "^1.0.1"
 
@@ -7603,9 +7603,9 @@ vue-loader@^13.0.4:
     vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.5.3"
 
-vue-markdown-loader@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-2.0.0.tgz#d3cadbf9c8976a81f2d5e39496d505fd4f31bc96"
+vue-markdown-loader@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/vue-markdown-loader/-/vue-markdown-loader-2.1.0.tgz#112d1921dd56daa29906b7c012623c6c5d6e0d8c"
   dependencies:
     cheerio "^0.20.0"
     highlight.js "^9.4.0"
@@ -7926,9 +7926,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b"
+zan-doc@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.2.tgz#ebf8ffda5bd3cf9277cc3e59c48476a3fbf84d9f"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"

From ac4b739814bb11c848ed1de00f8b3a05426a7a8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 14:38:22 +0800
Subject: [PATCH 06/16] Uploader: optimize template

---
 packages/uploader/index.vue | 89 ++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 46 deletions(-)

diff --git a/packages/uploader/index.vue b/packages/uploader/index.vue
index b0b8d4ede..59d120bbc 100644
--- a/packages/uploader/index.vue
+++ b/packages/uploader/index.vue
@@ -1,57 +1,54 @@
 <template>
   <div class="van-uploader">
     <slot></slot>
-    <template v-if="disabled">
-      <input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
-    </template>
-    <template v-else>
-      <input type="file" @change="onValueChange"  class="van-uploader__input" ref="input" />
-    </template>
+    <input type="file" @change="onValueChange" :disabled="disable" class="van-uploader__input" ref="input" />
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'van-uploader',
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      beforeRead: Function,
-      afterRead: Function,
-      resultType: {
-        type: String,
-        default: 'dataUrl',
-        validator(value) {
-          return value === 'dataUrl' || value === 'text';
-        }
-      }
+export default {
+  name: 'van-uploader',
+
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
     },
-    methods: {
-      onValueChange(event) {
-        if (this.disabled) {
-          return;
-        }
-        var files = event.target.files;
-        var file = files[0];
-        if (!file) return;
-        if (this.beforeRead && !this.beforeRead(file)) return;
-        var reader = new FileReader();
-        reader.onload = (e) => {
-          this.afterRead && this.afterRead(
-            {
-              file: file,
-              content: e.target.result
-            });
-          this.$refs.input && (this.$refs.input.value = '');
-        };
-        if (this.resultType === 'dataUrl') {
-          reader.readAsDataURL(file);
-        } else if (this.resultType === 'text') {
-          reader.readAsText(file);
-        }
+    beforeRead: Function,
+    afterRead: Function,
+    resultType: {
+      type: String,
+      default: 'dataUrl',
+      validator: value => value === 'dataUrl' || value === 'text'
+    }
+  },
+
+  methods: {
+    onValueChange(event) {
+      if (this.disable) {
+        return;
+      }
+
+      const file = event.target.files[0];
+      if (!file || (this.beforeRead && !this.beforeRead(file))) {
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.afterRead && this.afterRead({
+          file,
+          content: e.target.result
+        });
+        this.$refs.input && (this.$refs.input.value = '');
+      };
+
+      if (this.resultType === 'dataUrl') {
+        reader.readAsDataURL(file);
+      } else if (this.resultType === 'text') {
+        reader.readAsText(file);
       }
     }
-  };
+  }
+};
 </script>

From 5b1e27073deb96c8fffc952857d3cb9f192e16cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 15:07:00 +0800
Subject: [PATCH 07/16] Progress: optimzie dom struct

---
 docs/examples-docs/progress.md     | 63 ++++++++++--------------------
 packages/progress/index.vue        | 53 +++++++------------------
 packages/vant-css/src/progress.css | 45 ++++++++++-----------
 3 files changed, 55 insertions(+), 106 deletions(-)

diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index efb9a2993..917183190 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -1,13 +1,11 @@
 <style>
 .demo-progress {
-  &__wrapper {
-    padding: 5px;
+  .van-progress {
     margin: 20px 10px;
   }
 } 
 </style>
 
-
 ## Progress 进度条
 
 ### 使用指南
@@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);
 
 #### 基础用法
 
-默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
+进度条默认为蓝色，使用`percentage`属性来设置当前进度
 
 :::demo 基础用法
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
-</div>
+<van-progress :percentage="0"></van-progress>
+<van-progress :percentage="46"></van-progress>
+<van-progress :percentage="100"></van-progress>
 ```
 :::
 
 
-#### Inactive
+#### 进度条置灰
 
-是否置灰进度条，一般用于进度条被取消时。
-
-:::demo Inactive
+:::demo 进度条置灰
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
-</div>
+<van-progress inactive :percentage="0"></van-progress>
+<van-progress inactive :percentage="46"></van-progress>
+<van-progress inactive :percentage="100"></van-progress>
 ```
 :::
 
 
-#### 自定义颜色和文字
+#### 样式定制
 
 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
 
-:::demo 自定义颜色和文字
+:::demo 样式定制
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
-</div>
+<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
+<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
+<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
 ```
 :::
 
@@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否置灰 | `boolean`  | `false`          | `true`, `false`    |
-| percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
-| pivotText | 文字显示 | `string`  | 百分比文字          | -   |
-| color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
-| textColor | 进度条文字颜色 | `string`  | `#fff`    | hexvalue   |
-
+| inactive | 是否置灰 | `boolean` | `false` | |
+| percentage | 进度百分比 | `number` | `false` | `0-100` |
+| pivotText | 文字显示 | `string` | 百分比文字 | - |
+| color | 进度条颜色 | `string` | `#38f` | hexvalue |
+| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
index 4e89cfd58..685a46135 100644
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@@ -1,27 +1,11 @@
 <template>
   <div class="van-progress">
-    <div class="van-progress__bar">
-      <span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
-    </div>
+    <span class="van-progress__portion" :style="portionStyle"></span>
+    <span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
   </div>
 </template>
 
 <script>
-/**
- * van-progress
- * @module components/progress
- * @desc 开关
- * @param {boolean} [inactive=false] - 是否置灰
- * @param {number} [percentage=0] - 进度百分比
- * @param {string} [pivotText=percentage] - 进度条显示文字
- * @param {string} [color='#38f'] - 进度条颜色
- * @param {string} [textColor='#fff'] - 进度条文字颜色
- *
- * @example
- * <van-switch checked="true" disabled="false"></van-switch>
- */
-
 const DEFAULT_COLOR = '#38f';
 const DEFAULT_TEXT_COLOR = '#fff';
 const INACTIVE_COLOR = '#cacaca';
@@ -33,14 +17,12 @@ export default {
     percentage: {
       type: Number,
       required: true,
-      validator(value) {
-        return value <= 100 && value >= 0;
-      }
+      validator: value => value >= 0 && value <= 100
     },
     inactive: Boolean,
     pivotText: {
       type: String,
-      default: function() {
+      default() {
         return this.percentage + '%';
       }
     },
@@ -59,24 +41,19 @@ export default {
       return this.inactive ? INACTIVE_COLOR : this.color;
     },
     pivotStyle() {
-      const pivotStyle = {
-        backgroundColor: this.componentColor,
+      const { percentage } = this;
+      return {
         color: this.textColor,
-        left: this.percentage + '%',
-        marginLeft: '-14px'
+        backgroundColor: this.componentColor,
+        left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
+        marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
+      };
+    },
+    portionStyle() {
+      return {
+        width: this.percentage + '%',
+        backgroundColor: this.componentColor
       };
-      if (this.percentage <= 5) {
-        pivotStyle.left = '0%';
-        pivotStyle.marginLeft = '0';
-      } else if (this.percentage >= 95) {
-        pivotStyle.left = '100%';
-        pivotStyle.marginLeft = '-28px';
-      } else {
-        pivotStyle.left = this.percentage + '%';
-        pivotStyle.marginLeft = '-14px';
-      }
-
-      return pivotStyle;
     }
   }
 };
diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css
index a087660fb..645d7db64 100644
--- a/packages/vant-css/src/progress.css
+++ b/packages/vant-css/src/progress.css
@@ -1,32 +1,27 @@
 @import './common/var.css';
 
 .van-progress {
-  &__bar {
-    height: 4px;
-    border-radius: 4.5px;
-    width: 100%;
-    background: $c-gray-light;
-    position: relative;
+  height: 4px;
+  position: relative;
+  border-radius: 4px;
+  background: $c-gray-light;
 
-    &__finished-portion {
-      border-radius: 4.5px;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      display: inline-block;
-    }
+  &__portion {
+    left: 0;
+    height: 100%;
+    position: absolute;
+    border-radius: 4px;
+  }
 
-    &__pivot {
-      padding: 2px 0;
-      font-size: 8px;
-      position: absolute;
-      border-radius: 6px;
-      width: 28px;
-      background-color: $c-gray-light;
-      line-height: 8px;
-      text-align: center;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-    }
+  &__pivot {
+    top: 50%;
+    width: 28px;
+    font-size: 8px;
+    margin-top: -6px;
+    position: absolute;
+    border-radius: 6px;
+    line-height: 12px;
+    text-align: center;
+    background-color: $c-gray-light;
   }
 }

From 14085f5facbe46bd194b588f33ee2f447aa6dc00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 15:13:11 +0800
Subject: [PATCH 08/16] fix: progress test cases

---
 package.json                     |  2 +-
 test/unit/specs/progress.spec.js |  4 ++--
 yarn.lock                        | 29 ++++++++++++++++++++---------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index f6ff3a9f2..f51ff75c3 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.5",
     "eslint-plugin-vue": "^2.1.0",
-    "extract-text-webpack-plugin": "^3.0.0",
+    "extract-text-webpack-plugin": "2.0.0",
     "felint": "^0.5.0-alpha.3",
     "file-loader": "^0.11.2",
     "file-save": "^0.2.0",
diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
index 69b6cf763..d70226746 100644
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@@ -9,8 +9,8 @@ describe('Progress', () => {
     wrapper = mount(Progress, {
       propsData: propsData
     });
-    bar = wrapper.find('.van-progress__bar__finished-portion')[0];
-    pivot = wrapper.find('.van-progress__bar__pivot')[0];
+    bar = wrapper.find('.van-progress__portion')[0];
+    pivot = wrapper.find('.van-progress__pivot')[0];
   };
 
   afterEach(() => {
diff --git a/yarn.lock b/yarn.lock
index de34d1c02..28f96953e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -67,7 +67,7 @@ ajv-keywords@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
 
-ajv@^4.7.0, ajv@^4.9.1:
+ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
   dependencies:
@@ -305,7 +305,7 @@ async@2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.2, async@^2.4.1:
+async@^2.1.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -2768,14 +2768,14 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
+extract-text-webpack-plugin@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60"
   dependencies:
-    async "^2.4.1"
-    loader-utils "^1.1.0"
-    schema-utils "^0.3.0"
-    webpack-sources "^1.0.1"
+    ajv "^4.11.2"
+    async "^2.1.2"
+    loader-utils "^1.0.2"
+    webpack-sources "^0.1.0"
 
 extract-zip@~1.6.5:
   version "1.6.5"
@@ -6816,6 +6816,10 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
 source-map-support@^0.4.15:
   version "0.4.16"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8"
@@ -7707,6 +7711,13 @@ webpack-merge@^4.1.0:
   dependencies:
     lodash "^4.17.4"
 
+webpack-sources@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.5.3"
+
 webpack-sources@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"

From c7b96bd8e0dbd26fe22c821365fd4431097e0b5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 15:27:56 +0800
Subject: [PATCH 09/16] Progress: fix disable prop

---
 packages/uploader/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/uploader/index.vue b/packages/uploader/index.vue
index 59d120bbc..8e7e0cc42 100644
--- a/packages/uploader/index.vue
+++ b/packages/uploader/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="van-uploader">
     <slot></slot>
-    <input type="file" @change="onValueChange" :disabled="disable" class="van-uploader__input" ref="input" />
+    <input type="file" @change="onValueChange" :disabled="disabled" class="van-uploader__input" ref="input" />
   </div>
 </template>
 
@@ -10,7 +10,7 @@ export default {
   name: 'van-uploader',
 
   props: {
-    disable: {
+    disabled: {
       type: Boolean,
       default: false
     },
@@ -25,7 +25,7 @@ export default {
 
   methods: {
     onValueChange(event) {
-      if (this.disable) {
+      if (this.disabled) {
         return;
       }
 

From c5474b21069694a66415c77f52eb313d4ca27ca8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 20:36:24 +0800
Subject: [PATCH 10/16] CellSwipe: code review

---
 packages/cell-swipe/index.vue        | 153 +++++++++++++--------------
 packages/vant-css/src/cell-swipe.css |  29 +++--
 2 files changed, 86 insertions(+), 96 deletions(-)

diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue
index 6b9c024b8..7c1b87dde 100644
--- a/packages/cell-swipe/index.vue
+++ b/packages/cell-swipe/index.vue
@@ -1,15 +1,19 @@
 <template>
-  <div v-clickoutside:touchstart="swipeMove" @click="swipeMove()" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag" class="van-cell-swipe" ref="cell">
-    <div class="van-cell-wrapper">
-      <slot>单元格内容</slot>
-    </div>
-    <div class="van-cell-left">
-      <div ref="left">
+  <div 
+    v-clickoutside:touchstart="swipeMove"
+    class="van-cell-swipe"
+    @click="swipeMove()"
+    @touchstart="startDrag"
+    @touchmove="onDrag"
+    @touchend="endDrag"
+    @touchcancel="endDrag"
+  >
+    <div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
+      <div class="van-cell-swipe__left" v-if="leftWidth">
         <slot name="left"></slot>
       </div>
-    </div>
-    <div class="van-cell-right">
-      <div ref="right">
+      <slot></slot>
+      <div class="van-cell-swipe__right" v-if="rightWidth">
         <slot name="right"></slot>
       </div>
     </div>
@@ -17,112 +21,101 @@
 </template>
 
 <script>
-import { once } from '../utils/dom';
 import Clickoutside from '../utils/clickoutside';
 
 export default {
   name: 'van-cell-swipe',
+
   props: {
-    'leftWidth': { type: Number, default: 0 },
-    'rightWidth': { type: Number, default: 0 }
-  },
-  directives: { Clickoutside },
-  data() {
-    return {
-      start: { x: 0, y: 0 }
-    };
-  },
-  computed: {
-    leftDefaultTransform() {
-      return this.translate3d(-this.leftWidth - 1);
+    leftWidth: {
+      type: Number,
+      default: 0
     },
-    rightDefaultTransform() {
-      return this.translate3d(this.rightWidth);
+    rightWidth: {
+      type: Number,
+      default: 0
     }
   },
-  mounted() {
-    this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
-    this.leftElm = this.$refs.left;
-    this.leftWrapElm = this.leftElm.parentNode;
-    this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
 
-    this.rightElm = this.$refs.right;
-    this.rightWrapElm = this.rightElm.parentNode;
-    this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
+  directives: {
+    Clickoutside
   },
+
+  data() {
+    return {
+      offset: 0
+    };
+  },
+
+  computed: {
+    wrapperStyle() {
+      return {
+        transform: `translate3d(${this.offset}px, 0, 0)`
+      }
+    }
+  },
+
   methods: {
     resetSwipeStatus() {
       this.swiping = false; // 是否正在拖动
       this.opened = true; // 记录是否滑动左右 或者 注册
-      this.offsetLeft = 0; // 记录单次拖动的拖动距离
-    },
-    translate3d(offset) {
-      return `translate3d(${offset}px, 0, 0)`;
     },
+
     swipeMove(offset = 0) {
-      this.wrap.style.webkitTransform = this.translate3d(offset);
-      this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
-      this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
+      this.offset = offset;
       offset && (this.swiping = true);
     },
+
     swipeLeaveTransition(direction) {
-      setTimeout(() => {
-        this.swipeLeave = true;
-        // left
-        if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
-          this.swipeMove(-this.rightWidth);
-          this.resetSwipeStatus();
-          return;
-          // right
-        } else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
-          this.swipeMove(this.leftWidth);
-          this.resetSwipeStatus();
-          return;
-        } else {
-          this.swipeMove(0);
-          once(this.wrap, 'webkitTransitionEnd', () => {
-            this.wrap.style.webkitTransform = '';
-            this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
-            this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
-            this.swipeLeave = false;
-            this.swiping = false;
-          });
-        }
-      }, 0);
+      const { offset, leftWidth, rightWidth } = this;
+      // right
+      if (direction > 0 && -offset > rightWidth * 0.4 && rightWidth > 0) {
+        this.swipeMove(-rightWidth);
+        this.resetSwipeStatus();
+      }
+      // left
+      else if (direction < 0 && offset >leftWidth * 0.4 && leftWidth > 0) {
+        this.swipeMove(leftWidth);
+        this.resetSwipeStatus();
+      } else {
+        this.swipeMove();
+      }
     },
-    startDrag(evt) {
-      evt = evt.changedTouches ? evt.changedTouches[0] : evt;
-      this.dragging = true;
-      this.start.x = evt.pageX;
-      this.start.y = evt.pageY;
+
+    startDrag(event) {
+      this.startX = event.changedTouches[0].pageX;
+      this.startY = event.changedTouches[0].pageY;
     },
-    onDrag(evt) {
+
+    onDrag(event) {
       if (this.opened) {
-        !this.swiping && this.swipeMove(0);
+        !this.swiping && this.swipeMove();
         this.opened = false;
         return;
       }
-      if (!this.dragging) return;
-      let swiping;
-      const e = evt.changedTouches ? evt.changedTouches[0] : evt;
-      const offsetTop = e.pageY - this.start.y;
-      const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
+
+      const offsetTop = event.changedTouches[0].pageY - this.startY;
+      const offsetLeft = event.changedTouches[0].pageX - this.startX;
       if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
         (offsetLeft > 0 && offsetLeft > this.leftWidth) ||
         (offsetLeft > 0 && !this.leftWidth) ||
         (offsetLeft < 0 && !this.rightWidth)) {
         return;
       }
+
       const y = Math.abs(offsetTop);
       const x = Math.abs(offsetLeft);
-      swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
-      if (!swiping) return;
-      evt.preventDefault();
-      this.swipeMove(offsetLeft);
+      const swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
+      if (swiping) {
+        event.preventDefault();
+        this.swipeMove(offsetLeft);
+      };
     },
+
     endDrag() {
-      if (!this.swiping) return;
-      this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
+      if (this.swiping) {
+        this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);        
+      };
     }
   }
 };
diff --git a/packages/vant-css/src/cell-swipe.css b/packages/vant-css/src/cell-swipe.css
index 2bb7a35e8..3233148a6 100644
--- a/packages/vant-css/src/cell-swipe.css
+++ b/packages/vant-css/src/cell-swipe.css
@@ -1,29 +1,26 @@
-.van-cell {
-  &-swipe {
-    position: relative;
-    min-height: 48px;
-    overflow: hidden;
+.van-cell-swipe {
+  overflow: hidden;
+  position: relative;
 
-    .van-cell-wrapper,
-    .van-cell-left,
-    .van-cell-right {
-      transition: transform 150ms ease-in-out;
-    }
+  &__wrapper,
+  &__left,
+  &__right {
+    transition: transform .15s ease-in-out;
   }
 
-  &-left,
-  &-right {
-    position: absolute;
-    height: 100%;
+  &__left,
+  &__right {
     top: 0;
+    height: 100%;
+    position: absolute;
   }
 
-  &-left {
+  &__left {
     left: 0;
     transform: translate3d(-100%, 0, 0);
   }
 
-  &-right {
+  &__right {
     right: 0;
     transform: translate3d(100%, 0, 0);
   }

From c6b8de35418127c32ab3351704f31ef5b2380ea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 20:36:29 +0800
Subject: [PATCH 11/16] CellSwipe: improve test coverage

---
 test/unit/specs/cell-swipe.spec.js | 224 +++++++++++++----------------
 test/unit/utils.js                 |  33 ++++-
 2 files changed, 131 insertions(+), 126 deletions(-)

diff --git a/test/unit/specs/cell-swipe.spec.js b/test/unit/specs/cell-swipe.spec.js
index 46325f291..89e5ca833 100644
--- a/test/unit/specs/cell-swipe.spec.js
+++ b/test/unit/specs/cell-swipe.spec.js
@@ -1,141 +1,117 @@
 import CellSwipe from 'packages/cell-swipe';
 import { mount } from 'avoriaz';
+import { triggerTouch } from '../utils';
+
+const defaultProps = {
+  propsData: {
+    leftWidth: 100,
+    rightWidth: 100
+  }
+}
 
 describe('CellSwipe', () => {
   let wrapper;
   afterEach(() => {
     wrapper && wrapper.destroy();
   });
+  
+  it('render left or right part when has width', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+    expect(wrapper.find('.van-cell-swipe__left').length).to.equal(1);
+    expect(wrapper.find('.van-cell-swipe__right').length).to.equal(1);
+  });
 
-  it('create a CellSwipe', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 2,
-        rightWidth: 2
-      }
+  it('not render left or right part when width is 0', () => {
+    wrapper = mount(CellSwipe);
+    expect(wrapper.find('.van-cell-swipe__left').length).to.equal(0);
+    expect(wrapper.find('.van-cell-swipe__right').length).to.equal(0);
+  });
+
+  it('drag and show left part', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    expect(wrapper.vm.startX).to.equal(0);
+    expect(wrapper.vm.startY).to.equal(0);
+
+    triggerTouch(wrapper, 'touchmove', 50, 0);
+    expect(wrapper.vm.offset).to.equal(50);
+
+    triggerTouch(wrapper, 'touchend', 50, 0);
+    expect(wrapper.vm.offset).to.equal(100);
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.opened).to.be.true;
     });
-    wrapper.vm.startDrag({
-      pageX: 0,
-      pageY: 0
+  });
+
+  it('drag and show right part', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', -50, 0);
+    triggerTouch(wrapper, 'touchend', -50, 0);
+    expect(wrapper.vm.offset).to.equal(-100);
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.opened).to.be.true;
     });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: 50
+  });
+
+  it('drag and reset left part', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', 10, 0);
+    triggerTouch(wrapper, 'touchmove', 30, 0);
+    triggerTouch(wrapper, 'touchend', 30, 0);
+    expect(wrapper.vm.offset).to.equal(0);
+  });
+
+  it('drag and reset right part', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', -10, 0);
+    triggerTouch(wrapper, 'touchmove', -30, 0);
+    triggerTouch(wrapper, 'touchend', -30, 0);
+    expect(wrapper.vm.offset).to.equal(0);
+  });
+
+  it('drag distance out of ranges', () => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', 1000, 0);
+    expect(wrapper.vm.offset).to.equal(0);
+  });
+
+  it('drag and hide left part', (done) => {
+    wrapper = mount(CellSwipe, defaultProps);
+
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', 20, 0);
+    triggerTouch(wrapper, 'touchmove', 50, 0);
+    triggerTouch(wrapper, 'touchend', 50, 0);
+    expect(wrapper.vm.offset).to.equal(100);
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.opened).to.be.true;
+
+      triggerTouch(wrapper, 'touchstart', 0, 0);
+      triggerTouch(wrapper, 'touchmove', 1, 0);
+      
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.offset).to.equal(0);
+        expect(wrapper.vm.opened).to.be.false;
+        done();
+      });
     });
-    wrapper.vm.offsetLeft = -20;
-    wrapper.vm.rightWidth = 10;
-    wrapper.vm.swipeLeaveTransition(1);
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
   });
-});
 
+  it('drag vertical', () => {
+    wrapper = mount(CellSwipe, defaultProps);
 
-describe('CellSwipe-left', () => {
-  let wrapper;
-  afterEach(() => {
-    wrapper && wrapper.destroy();
-  });
-
-  it('create a CellSwipe left', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 2,
-        rightWidth: 2
-      }
-    });
-    wrapper.vm.startDrag({
-      changedTouches: [{
-        pageX: 0,
-        pageY: 0
-      }
-      ]
-    });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      changedTouches: [{
-        pageX: 0,
-        pageY: -50
-      }
-      ]
-    });
-    wrapper.vm.offsetLeft = 20;
-    wrapper.vm.rightWidth = 10;
-    wrapper.vm.swipeLeaveTransition(-1);
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
-  });
-});
-
-describe('CellSwipe-0', () => {
-  let wrapper;
-  afterEach(() => {
-    wrapper && wrapper.destroy();
-  });
-
-  it('create a CellSwipe 0', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 0,
-        rightWidth: 2
-      }
-    });
-    wrapper.vm.startDrag({
-      pageX: 0,
-      pageY: 0
-    });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: -2
-    });
-    wrapper.vm.opened = true;
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: -2
-    });
-    wrapper.vm.opened = false;
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 0,
-      pageX: 40
-    });
-    wrapper.vm.swipeLeaveTransition(0);
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
-  });
-});
-
-
-describe('CellSwipe-0', () => {
-  let wrapper;
-  afterEach(() => {
-    wrapper && wrapper.destroy();
-  });
-
-  it('create a CellSwipe 0', () => {
-    wrapper = mount(CellSwipe, {
-      propsData: {
-        leftWidth: 0,
-        rightWidth: 2
-      }
-    });
-    wrapper.vm.startDrag({
-      pageX: 0,
-      pageY: 0
-    });
-    wrapper.vm.onDrag({
-      preventDefault() {},
-      pageY: 1000,
-      pageX: 40
-    });
-    wrapper.vm.swipeMove();
-    wrapper.vm.swiping = false;
-    wrapper.vm.endDrag();
-    wrapper.vm.swiping = true;
-    wrapper.vm.endDrag();
-    expect(wrapper.hasClass('van-cell-swipe')).to.be.true;
+    triggerTouch(wrapper, 'touchstart', 0, 0);
+    triggerTouch(wrapper, 'touchmove', 0, 100);
+    triggerTouch(wrapper, 'touchend', 0, 100);
+    expect(wrapper.vm.offset).to.equal(0);
   });
 });
diff --git a/test/unit/utils.js b/test/unit/utils.js
index b8d768787..262356ed2 100644
--- a/test/unit/utils.js
+++ b/test/unit/utils.js
@@ -31,7 +31,9 @@ export function DOMChecker(wrapper, rules) {
   if (style) {
     Object.keys(style).forEach(key => {
       Object.keys(style[key]).forEach(prop => {
-        expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal(true);
+        expect(wrapper.find(key)[0].hasStyle(prop, style[key][prop])).to.equal(
+          true
+        );
       });
     });
   }
@@ -39,8 +41,35 @@ export function DOMChecker(wrapper, rules) {
   if (noStyle) {
     Object.keys(noStyle).forEach(key => {
       Object.keys(noStyle[key]).forEach(prop => {
-        expect(wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop])).to.equal(false);
+        expect(
+          wrapper.find(key)[0].hasStyle(prop, noStyle[key][prop])
+        ).to.equal(false);
       });
     });
   }
 }
+
+// 触发一个 touch 事件
+export function triggerTouch(wrapper, eventName, x, y) {
+  const el = wrapper.element ? wrapper.element : wrapper;
+  const touch = {
+    identifier: Date.now(),
+    target: el,
+    pageX: x,
+    pageY: y,
+    clientX: x,
+    clientY: y,
+    radiusX: 2.5,
+    radiusY: 2.5,
+    rotationAngle: 10,
+    force: 0.5,
+  };
+
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(eventName, true, true, {});
+  event.touches = [touch];
+  event.targetTouches = [touch];
+  event.changedTouches = [touch];
+
+  el.dispatchEvent(event);
+}

From 057049c15aaad61dd35fa25fe2216963fb49a0fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 20:36:42 +0800
Subject: [PATCH 12/16] feat: support run single test

---
 package.json                  |   1 +
 test/unit/get-webpack-conf.js | 178 +++++++++++++++++-----------------
 test/unit/index.js            |  12 ++-
 test/unit/karma.conf.js       |   9 +-
 test/unit/selector.js         |  19 ++++
 5 files changed, 126 insertions(+), 93 deletions(-)
 create mode 100644 test/unit/selector.js

diff --git a/package.json b/package.json
index f51ff75c3..954d349c8 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "test": "karma start test/unit/karma.conf.js --single-run",
     "test:coverage": "open test/unit/coverage/lcov-report/index.html",
     "test:watch": "karma start test/unit/karma.conf.js",
+    "test:single": "node ./test/unit/selector.js",
     "release": "npm run bootstrap && sh build/release.sh"
   },
   "repository": {
diff --git a/test/unit/get-webpack-conf.js b/test/unit/get-webpack-conf.js
index 1c57dd658..6d0818692 100644
--- a/test/unit/get-webpack-conf.js
+++ b/test/unit/get-webpack-conf.js
@@ -2,96 +2,96 @@ const path = require('path');
 const webpack = require('webpack');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
-const webpackConfig = {
-  output: {
-    path: path.resolve(process.cwd(), 'dist'),
-    publicPath: '/dist/',
-    filename: '[name].js',
-    chunkFilename: '[id].js',
-    libraryTarget: 'umd'
-  },
-  plugins: [
-    new ProgressBarPlugin(),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true,
-      options: {
-        babel: {
-          presets: ['env'],
-          plugins: ['transform-runtime', 'transform-vue-jsx']
-        },
-        vue: {
-          autoprefixer: false,
-          preserveWhitespace: false
+function getWebpackConfig(testFileName) {
+  return {
+    output: {
+      path: path.resolve(process.cwd(), 'dist'),
+      publicPath: '/dist/',
+      filename: '[name].js',
+      chunkFilename: '[id].js',
+      libraryTarget: 'umd'
+    },
+    plugins: [
+      new ProgressBarPlugin(),
+      new webpack.LoaderOptionsPlugin({
+        minimize: true,
+        options: {
+          babel: {
+            presets: ['env'],
+            plugins: ['transform-runtime', 'transform-vue-jsx']
+          },
+          vue: {
+            autoprefixer: false,
+            preserveWhitespace: false
+          }
         }
-      }
-    })
-  ],
-  stats: 'errors-only',
-  resolve: {
-    modules: [
-      path.resolve(process.cwd(), 'node_modules'),
-      'node_modules'
+      }),
+      new webpack.DefinePlugin({
+        'process.env': {
+          TEST_FILE: `"${testFileName}"`
+        }
+      })
     ],
-    extensions: ['.js', '.json', '.vue'],
-    alias: {
-      src: path.resolve(process.cwd(), 'src'),
-      packages: path.resolve(process.cwd(), 'packages'),
-      examples: path.resolve(process.cwd(), 'examples'),
-      vue$: 'vue/dist/vue.common.js'
-    }
-  },
-  module: {
-    rules: [
-      {
-        enforce: 'pre',
-        test: /\.js$/,
-        exclude: /node_modules|vue-router\/|vue-loader\/|docs|test|src\/index|src\/utils|src\/mixins|packages\/swipe/,
-        use: ['isparta-loader']
-      },
-      {
-        test: /\.js$/,
-        exclude: /node_modules|vue-router\/|vue-loader\//,
-        use: ['babel-loader']
-      },
-      {
-        test: /\.(css|pcss)$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          'postcss-loader'
-        ]
-      },
-      {
-        test: /\.(gif|png|jpe?g)(\?\S*)?$/,
-        use: [{
-          loader: 'url-loader',
-          options: {
-            query: {
-              limit: 10000,
-              name: 'static/[name].[hash:7].[ext]'
-            }
-          }
-        }]
-      },
-      {
-        test: /\.vue$/,
-        use: [{
-          loader: 'vue-loader',
-          options: {
-            loaders: {
-              css: [
-                'style-loader',
-                'css-loader',
-                'postcss-loader'
-              ],
-              js: ['isparta-loader']
-            }
-          }
-        }]
+    stats: 'errors-only',
+    resolve: {
+      modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'],
+      extensions: ['.js', '.json', '.vue'],
+      alias: {
+        src: path.resolve(process.cwd(), 'src'),
+        packages: path.resolve(process.cwd(), 'packages'),
+        examples: path.resolve(process.cwd(), 'examples'),
+        vue$: 'vue/dist/vue.common.js'
       }
-    ]
-  },
-  devtool: '#inline-source-map'
-};
+    },
+    module: {
+      rules: [
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          exclude: /node_modules|vue-router\/|vue-loader\/|docs|test|src\/index|src\/utils|src\/mixins|packages\/swipe/,
+          use: ['isparta-loader']
+        },
+        {
+          test: /\.js$/,
+          exclude: /node_modules|vue-router\/|vue-loader\//,
+          use: ['babel-loader']
+        },
+        {
+          test: /\.(css|pcss)$/,
+          use: ['style-loader', 'css-loader', 'postcss-loader']
+        },
+        {
+          test: /\.(gif|png|jpe?g)(\?\S*)?$/,
+          use: [
+            {
+              loader: 'url-loader',
+              options: {
+                query: {
+                  limit: 10000,
+                  name: 'static/[name].[hash:7].[ext]'
+                }
+              }
+            }
+          ]
+        },
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: 'vue-loader',
+              options: {
+                loaders: {
+                  css: ['style-loader', 'css-loader', 'postcss-loader'],
+                  js: ['isparta-loader']
+                }
+              }
+            }
+          ]
+        }
+      ]
+    },
+    devtool: '#inline-source-map'
+  };
+}
 
-module.exports = webpackConfig;
+module.exports = getWebpackConfig;
diff --git a/test/unit/index.js b/test/unit/index.js
index fc003e86e..998623e9d 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,5 +1,13 @@
 require('packages/vant-css/src/index.css');
 
-// require all test files (files that ends with .spec.js)
+// 读取配置文件，判断运行单个测试文件还是所有测试文件
 const testsReq = require.context('./specs', true, /\.spec$/);
-testsReq.keys().forEach(testsReq);
+if (process.env.TEST_FILE) {
+  testsReq.keys().forEach((file) => {
+    if (file.indexOf(process.env.TEST_FILE) !== -1) {
+      testsReq(file);
+    }
+  });
+} else {
+  testsReq.keys().forEach(testsReq);
+}
\ No newline at end of file
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index e94bd9532..7c8a89d96 100644
--- a/test/unit/karma.conf.js
+++ b/test/unit/karma.conf.js
@@ -4,7 +4,7 @@ require('babel-core/register')({
   presets: [require('babel-preset-env')]
 });
 
-var webpackConfig = require('./get-webpack-conf');
+var getWebpackConfig = require('./get-webpack-conf');
 var travis = process.env.TRAVIS;
 
 module.exports = function(config) {
@@ -16,7 +16,7 @@ module.exports = function(config) {
     preprocessors: {
       './index.js': ['webpack', 'sourcemap']
     },
-    webpack: webpackConfig,
+    webpack: getWebpackConfig(getTestFileName()),
     webpackMiddleware: {
       noInfo: true
     },
@@ -30,3 +30,8 @@ module.exports = function(config) {
     singleRun: false
   });
 };
+
+function getTestFileName() {
+  const flagIndex = process.argv.indexOf('--file');
+  return flagIndex !== -1 ? process.argv[flagIndex + 1] : '';
+}
diff --git a/test/unit/selector.js b/test/unit/selector.js
new file mode 100644
index 000000000..ea3b633eb
--- /dev/null
+++ b/test/unit/selector.js
@@ -0,0 +1,19 @@
+/**
+ * 运行单个测试文件
+ */
+
+const fs = require('fs');
+const inquirer = require('inquirer');
+const path = require('path');
+const shell = require('shelljs');
+const files = fs.readdirSync(path.resolve(__dirname, './specs'));
+
+inquirer.prompt([{
+  type: 'list',
+  name: 'select',
+  message: '请选择要运行的测试文件：',
+  choices: files
+}], (result) => {
+  const file = result.select.replace('.spec.js', '');
+  shell.exec('karma start test/unit/karma.conf.js --color alway --file ' + file);
+});

From 34696d3f6e1ae09f283888ccfa3ea11cee74dae8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 24 Aug 2017 20:39:06 +0800
Subject: [PATCH 13/16] remove dom.js

---
 packages/utils/dom.js | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 packages/utils/dom.js

diff --git a/packages/utils/dom.js b/packages/utils/dom.js
deleted file mode 100644
index bd9b6edb5..000000000
--- a/packages/utils/dom.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Vue from 'vue';
-
-export const once = function(el, event, fn) {
-  const listener = function() {
-    if (fn) {
-      fn.apply(this, arguments);
-    }
-    el.removeEventListener(event, listener);
-  };
-  el.addEventListener(event, listener);
-};

From 43693fa781777022c31504b09924b388423a14ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Fri, 25 Aug 2017 15:37:39 +0800
Subject: [PATCH 14/16] Dialog: support both function call and component call

---
 docs/examples-docs/dialog.md     |  95 ++++++++++++++--------------
 packages/dialog/dialog.vue       |  49 ++++++++++-----
 packages/dialog/index.js         | 105 +++++++++++--------------------
 packages/vant-css/src/button.css |   1 -
 packages/vant-css/src/dialog.css |  10 ++-
 test/unit/specs/dialog.spec.js   |  23 +++----
 6 files changed, 131 insertions(+), 152 deletions(-)

diff --git a/docs/examples-docs/dialog.md b/docs/examples-docs/dialog.md
index a40704c8c..cb71eacc0 100644
--- a/docs/examples-docs/dialog.md
+++ b/docs/examples-docs/dialog.md
@@ -9,33 +9,29 @@
 <script>
 import { Dialog } from 'packages/index';
 
+const message = '弹窗内容';
+
 export default {
   methods: {
-    handleAlertClick() {
+    onClickAlert() {
       Dialog.alert({
-        title: 'alert标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
+        title: '标题',
+        message
       });
     },
 
-    handleAlert2Click() {
+    onClickAlert2() {
       Dialog.alert({
-        message: '无标题alert'
-      }).then((action) => {
-        console.log(action);
+        message
       });
     },
 
-    handleConfirmClick() {
+    onClickConfirm() {
       Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
+        title: '标题',
+        message
+      }).catch(action => {
         console.log(action);
-      }, (error) => {
-        console.log(error);
       });
     }
   }
@@ -46,8 +42,6 @@ export default {
 
 ### 使用指南
 
-`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
-
 ```js
 import { Dialog } from 'vant';
 ```
@@ -56,30 +50,30 @@ import { Dialog } from 'vant';
 
 #### 消息提示
 
-用于提示一些消息，只包含一个确认按钮。
+用于提示一些消息，只包含一个确认按钮
 
 :::demo 消息提示
 ```html
-<van-button @click="handleAlertClick">alert</van-button>
-<van-button @click="handleAlert2Click">无标题alert</van-button>
+<van-button @click="onClickAlert">Alert</van-button>
+<van-button @click="onClickAlert2">无标题 Alert</van-button>
 
 <script>
 export default {
   methods: {
-    handleAlertClick() {
+    onClickAlert() {
       Dialog.alert({
-        title: 'alert标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
+        title: '标题',
+        message: '弹窗内容'
+      }).then(() => {
+        // on close
       });
     },
 
-    handleAlert2Click() {
+    onClickAlert2() {
       Dialog.alert({
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
+        message: '弹窗内容'
+      }).then(() => {
+        // on close
       });
     }
   }
@@ -90,23 +84,23 @@ export default {
 
 #### 消息确认
 
-用于确认消息，包含取消和确认按钮。
+用于确认消息，包含取消和确认按钮
 
 :::demo 消息确认
 ```html
-<van-button @click="handleConfirmClick">confirm</van-button>
+<van-button @click="onClickConfirm">Confirm</van-button>
 
 <script>
 export default {
   methods: {
-    handleConfirmClick() {
+    onClickConfirm() {
       Dialog.confirm({
-        title: 'confirm标题',
-        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
-      }).then((action) => {
-        console.log(action);
-      }, (error) => {
-        console.log(error);
+        title: '标题',
+        message: '弹窗内容'
+      }).then(() => {
+        // on confirm
+      }).catch(() => {
+        // on cancel
       });
     }
   }
@@ -117,19 +111,22 @@ export default {
 
 ### 方法
 
-#### Dialog.alert(options)
-
-消息提示时使用该方法。
-
-#### Dialog.confirm(options)
-
-消息确认时使用该方法。
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| Dialog.alert | options | `Promise`  | 展示消息提示弹窗 |
+| Dialog.confirm | options | `Promise`  | 展示消息确认弹窗 |
+| Dialog.close | - | `void`  | 关闭弹窗 |
 
 ### Options
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | `string`  |  |   |
-| message | 内容 | `string`  |  |   |
-| confirmButtonText | 确认按钮的文案 | `string`  |  `确认` |   |
-| cancelButtonText | 取消按钮的文案 | `string`  | `取消` |   |
+| title | 标题 | `String`  |  |   |
+| message | 内容 | `String`  |  |   |
+| showConfirmButton | 是否展示确认按钮 | `Boolean`  |  `true` |   |
+| showCancelButton | 是否展示取消按钮 | `Boolean`  |  `false` |   |
+| confirmButtonText | 确认按钮的文案 | `String`  |  `确认` |   |
+| cancelButtonText | 取消按钮的文案 | `String`  | `取消` |   |
+| overlay | 是否展示蒙层 | `Boolean`  | `true` |   |
+| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean`  | `false` |   |
+| lockOnScroll | 是否禁用背景滚动 | `Boolean`  | `true` |   |
diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue
index aabc82ed8..7aec18626 100644
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@@ -2,8 +2,10 @@
   <transition name="van-dialog-bounce">
     <div class="van-dialog" v-show="value">
       <div class="van-dialog__header" v-if="title" v-text="title" />
-      <div class="van-dialog__content" v-if="message">
-        <div class="van-dialog__message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
+      <div class="van-dialog__content">
+        <slot>
+          <div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
+        </slot>
       </div>
       <div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
         <van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button>
@@ -27,33 +29,48 @@ export default {
   mixins: [Popup],
 
   props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    message: {
+      type: String,
+      default: ''
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: true
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: false
+    },
+    confirmButtonText: {
+      type: String,
+      default: '确认'
+    },
+    cancelButtonText: {
+      type: String,
+      default: '取消'
+    },
+    callback: {
+      type: Function
+    },
     overlay: {
       default: true
     },
     closeOnClickOverlay: {
-      default: true
+      default: false
     },
     lockOnScroll: {
       default: true
     }
   },
 
-  data() {
-    return {
-      title: '',
-      message: '',
-      type: '',
-      showConfirmButton: true,
-      showCancelButton: false,
-      confirmButtonText: '确认',
-      cancelButtonText: '取消',
-      callback: null
-    };
-  },
-
   methods: {
     handleAction(action) {
       this.$emit('input', false);
+      this.$emit(action);
       this.callback && this.callback(action);
     }
   }
diff --git a/packages/dialog/index.js b/packages/dialog/index.js
index c5287b19c..02df39c96 100644
--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@@ -1,97 +1,62 @@
 import Vue from 'vue';
-import Dialog from './dialog';
+import DialogComponent from './dialog';
 
-const DialogConstructor = Vue.extend(Dialog);
-
-let currentDialog;
 let instance;
-let dialogQueue = [];
 
-const defaultCallback = action => {
-  /* istanbul ignore else */
-  if (currentDialog) {
-    if (currentDialog.resolve && action === 'confirm') {
-      currentDialog.resolve(action);
-    } else if (currentDialog.reject && action === 'cancel') {
-      currentDialog.reject(action);
-    }
+const defaultConfig = {
+  value: true,
+  title: '',
+  message: '',
+  showCancelButton: false,
+  closeOnClickOverlay: false,
+  callback: action => {
+    instance[action === 'confirm' ? 'resolve' : 'reject'](action);
   }
 };
 
 const initInstance = () => {
+  const DialogConstructor = Vue.extend(DialogComponent);
   instance = new DialogConstructor({
     el: document.createElement('div')
   });
 
   instance.$on('input', value => {
     instance.value = value;
-  })
-  instance.callback = defaultCallback;
+  });
+
+  document.body.appendChild(instance.$el);
 };
 
-const showNextDialog = () => {
-  if (!instance) {
-    initInstance();
-  }
-
-  /* istanbul ignore else */
-  if (!instance.value && dialogQueue.length > 0) {
-    currentDialog = dialogQueue.shift();
-
-    const { options } = currentDialog;
-
-    for (const prop in options) {
-      /* istanbul ignore else */
-      if (options.hasOwnProperty(prop)) {
-        instance[prop] = options[prop];
-      }
+const Dialog = options => {
+  return new Promise((resolve, reject) => {
+    if (!instance) {
+      initInstance();
     }
 
-    instance.callback = options.callback || defaultCallback;
-    instance.value = true;
-    document.body.appendChild(instance.$el);
-  }
-};
-
-const DialogBox = options => {
-  return new Promise((resolve, reject) => { // eslint-disable-line
-    dialogQueue.push({
-      options: { ...options },
-      callback: options.callback,
-      resolve: resolve,
-      reject: reject
+    Object.assign(instance, {
+      resolve,
+      reject,
+      ...options
     });
-
-    showNextDialog();
   });
 };
 
-DialogBox.alert = function(options) {
-  return DialogBox({
-    type: 'alert',
-    title: '',
-    message: '',
-    closeOnClickOverlay: false,
-    showCancelButton: false,
-    ...options
-  });
-};
+Dialog.alert = options => Dialog({
+  ...defaultConfig,
+  ...options
+});
 
-DialogBox.confirm = function(options) {
-  return DialogBox({
-    type: 'confirm',
-    title: '',
-    message: '',
-    closeOnClickOverlay: true,
-    showCancelButton: true,
-    ...options
-  });
-};
+Dialog.confirm = options => Dialog({
+  ...defaultConfig,
+  showCancelButton: true,
+  ...options
+});
 
-DialogBox.close = function() {
+Dialog.close = () => {
   instance.value = false;
-  dialogQueue = [];
-  currentDialog = null;
 };
 
-export default DialogBox;
+export default Dialog;
+export {
+  Dialog
+};
diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 0d05cdbf4..a3fd5f146 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -11,7 +11,6 @@
   font-size: 16px;
   text-align: center;
   outline: 0;
-  overflow: hidden;
   -webkit-appearance: none;
 
   &::after {
diff --git a/packages/vant-css/src/dialog.css b/packages/vant-css/src/dialog.css
index a7f77a619..5f76c401f 100644
--- a/packages/vant-css/src/dialog.css
+++ b/packages/vant-css/src/dialog.css
@@ -42,9 +42,10 @@
     overflow: hidden;
 
     &.is-twobtn {
+      display: flex;
+
       .van-button {
-        width: 50%;
-        float: left;
+        flex: 1;
       }
 
       .van-dialog__cancel {
@@ -63,7 +64,10 @@
   }
 
   &__confirm {
-    color: #00C000;
+    &,
+    &:active {
+      color: #00C000;
+    }
   }
 
   &-bounce-enter {
diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js
index be92b4e3c..107c71ca7 100644
--- a/test/unit/specs/dialog.spec.js
+++ b/test/unit/specs/dialog.spec.js
@@ -3,11 +3,6 @@ import Vue from 'vue';
 
 describe('Dialog', () => {
   afterEach(() => {
-    const el = document.querySelector('.van-dialog');
-    if (!el) return;
-    if (el.parentNode) {
-      el.parentNode.removeChild(el);
-    }
     Dialog.close();
   });
 
@@ -28,30 +23,32 @@ describe('Dialog', () => {
     }, 500);
   });
 
-  it('create a confirm dialog', () => {
+  it('create a confirm dialog', (done) => {
     Dialog.confirm({
       title: 'title',
       message: 'message'
+    }).catch((action) => {
+      expect(action).to.equal('cancel');
+      done();
     });
 
     expect(document.querySelector('.van-dialog')).to.exist;
+
+    setTimeout(() => {
+      document.querySelector('.van-dialog__cancel').click();
+    }, 500);
   });
 
   it('create a confirm dialog with callback', (done) => {
-    let dialogAction;
     Dialog.confirm({
-      title: 'title',
-      message: 'message',
       callback: (action) => {
-        dialogAction = action;
+        expect(action).to.equal('cancel');
+        done();
       }
     });
 
-    expect(document.querySelector('.van-dialog')).to.exist;
     setTimeout(() => {
       document.querySelector('.van-dialog__cancel').click();
-      expect(dialogAction).to.equal('cancel');
-      done();
     }, 500);
   });
 });

From e7b1d709002e5dac914dc4e545fbf2a2b06f9b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Fri, 25 Aug 2017 15:57:38 +0800
Subject: [PATCH 15/16] fix: code style

---
 packages/actionsheet/index.vue           |  8 +++----
 packages/badge-group/index.vue           | 30 ++++++++++++------------
 packages/cell-swipe/index.vue            |  7 +++---
 packages/datetime-picker/index.vue       |  2 +-
 packages/field/index.vue                 |  8 +++----
 packages/image-preview/image-preview.vue |  8 +++----
 packages/loading/index.vue               | 13 ++++------
 packages/mixins/popup/index.js           |  2 +-
 packages/mixins/popup/popup-manager.js   |  2 +-
 packages/picker/index.vue                |  8 +++----
 packages/search/index.vue                |  4 ++--
 packages/steps/index.vue                 |  2 +-
 packages/swipe-item/index.vue            |  4 ++--
 packages/swipe/index.vue                 | 14 +++++------
 packages/switch/index.vue                | 16 +++----------
 packages/tabs/index.vue                  |  4 ++--
 packages/tag/index.vue                   |  4 +---
 packages/toast/toast.vue                 |  8 +++----
 18 files changed, 64 insertions(+), 80 deletions(-)

diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 175d00245..04f206ba2 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -28,8 +28,8 @@
 
 <script>
 import Popup from '../mixins/popup';
-import VanIcon from '../icon';
-import VanLoading from '../loading';
+import Icon from '../icon';
+import Loading from '../loading';
 
 export default {
   name: 'van-actionsheet',
@@ -37,8 +37,8 @@ export default {
   mixins: [Popup],
 
   components: {
-    [VanIcon.name]: VanIcon,
-    [VanLoading.name]: VanLoading
+    [Icon.name]: Icon,
+    [Loading.name]: Loading
   },
 
   props: {
diff --git a/packages/badge-group/index.vue b/packages/badge-group/index.vue
index dc1009994..1fc386423 100644
--- a/packages/badge-group/index.vue
+++ b/packages/badge-group/index.vue
@@ -5,21 +5,21 @@
 </template>
 
 <script>
-  export default {
-    name: 'van-badge-group',
+export default {
+  name: 'van-badge-group',
 
-    props: {
-      // 当前激活 tab 面板的 key
-      activeKey: {
-        type: [Number, String],
-        default: 0
-      }
-    },
-
-    data() {
-      return {
-        badges: []
-      };
+  props: {
+    // 当前激活 tab 面板的 key
+    activeKey: {
+      type: [Number, String],
+      default: 0
     }
-  };
+  },
+
+  data() {
+    return {
+      badges: []
+    };
+  }
+};
 </script>
diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue
index 7c1b87dde..7ab4ce705 100644
--- a/packages/cell-swipe/index.vue
+++ b/packages/cell-swipe/index.vue
@@ -51,7 +51,7 @@ export default {
     wrapperStyle() {
       return {
         transform: `translate3d(${this.offset}px, 0, 0)`
-      }
+      };
     }
   },
 
@@ -72,9 +72,8 @@ export default {
       if (direction > 0 && -offset > rightWidth * 0.4 && rightWidth > 0) {
         this.swipeMove(-rightWidth);
         this.resetSwipeStatus();
-      }
       // left
-      else if (direction < 0 && offset >leftWidth * 0.4 && leftWidth > 0) {
+      } else if (direction < 0 && offset > leftWidth * 0.4 && leftWidth > 0) {
         this.swipeMove(leftWidth);
         this.resetSwipeStatus();
       } else {
@@ -114,7 +113,7 @@ export default {
 
     endDrag() {
       if (this.swiping) {
-        this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);        
+        this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);
       };
     }
   }
diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue
index 75d521a17..c89cc77ff 100644
--- a/packages/datetime-picker/index.vue
+++ b/packages/datetime-picker/index.vue
@@ -19,7 +19,7 @@ export default {
   name: 'van-datetime-picker',
 
   components: {
-    'van-picker': Picker
+    [Picker.name]: Picker
   },
 
   props: {
diff --git a/packages/field/index.vue b/packages/field/index.vue
index 2f86df5b1..67145aa67 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -48,15 +48,15 @@
 
 <script>
 const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
-import vanCell from '../cell';
-import vanIcon from '../icon';
+import Cell from '../cell';
+import Icon from '../icon';
 
 export default {
   name: 'van-field',
 
   components: {
-    vanCell,
-    vanIcon
+    [Cell.name]: Cell,
+    [Icon.name]: Icon
   },
 
   props: {
diff --git a/packages/image-preview/image-preview.vue b/packages/image-preview/image-preview.vue
index 1ff21be7b..7b6cc3245 100644
--- a/packages/image-preview/image-preview.vue
+++ b/packages/image-preview/image-preview.vue
@@ -13,8 +13,8 @@
 <script>
 import Vue from 'vue';
 import Popup from '../mixins/popup';
-import VanSwipe from '../swipe';
-import VanSwipeItem from '../swipe-item';
+import Swipe from '../swipe';
+import SwipeItem from '../swipe-item';
 
 export default {
   name: 'van-image-preview',
@@ -22,8 +22,8 @@ export default {
   mixins: [Popup],
 
   components: {
-    VanSwipe,
-    VanSwipeItem
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem
   },
 
   props: {
diff --git a/packages/loading/index.vue b/packages/loading/index.vue
index 64fb16f73..75e8f7b33 100644
--- a/packages/loading/index.vue
+++ b/packages/loading/index.vue
@@ -1,12 +1,13 @@
 <template>
-  <div class="van-loading" :class="['van-loading--' + type]">
-    <span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
+  <div :class="['van-loading', 'van-loading--' + type]">
+    <span :class="['van-loading__spinner', 'van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
   </div>
 </template>
 
 <script>
 const VALID_TYPES = ['gradient-circle', 'circle'];
 const VALID_COLORS = ['black', 'white'];
+
 export default {
   name: 'van-loading',
 
@@ -14,16 +15,12 @@ export default {
     type: {
       type: String,
       default: 'gradient-circle',
-      validator(value) {
-        return VALID_TYPES.indexOf(value) > -1;
-      }
+      validator: value => VALID_TYPES.indexOf(value) > -1
     },
     color: {
       type: String,
       default: 'black',
-      validator(value) {
-        return VALID_COLORS.indexOf(value) > -1;
-      }
+      validator: value => VALID_COLORS.indexOf(value) > -1
     }
   }
 };
diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js
index b4b8fa227..cb98e2638 100644
--- a/packages/mixins/popup/index.js
+++ b/packages/mixins/popup/index.js
@@ -138,7 +138,7 @@ export default {
 
       if (this.preventScroll) {
         document.addEventListener('touchstart', this.recordPosition, false);
-        document.addEventListener('touchmove', this.watchTouchMove, false);        
+        document.addEventListener('touchmove', this.watchTouchMove, false);
       }
     },
 
diff --git a/packages/mixins/popup/popup-manager.js b/packages/mixins/popup/popup-manager.js
index c422b537f..4c71dfc99 100644
--- a/packages/mixins/popup/popup-manager.js
+++ b/packages/mixins/popup/popup-manager.js
@@ -82,7 +82,7 @@ const PopupManager = {
 
     let domParentNode;
     if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
-      domParentNode = dom.parentNode
+      domParentNode = dom.parentNode;
     } else {
       domParentNode = document.body;
     }
diff --git a/packages/picker/index.vue b/packages/picker/index.vue
index cf2851cda..5468a326d 100644
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@@ -8,7 +8,7 @@
       </slot>
     </div>
     <div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
-      <picker-column
+      <van-picker-column
         v-for="(item, index) in columns"
         :key="index"
         v-model="values[index]"
@@ -17,8 +17,8 @@
         :itemHeight="itemHeight"
         :visible-item-count="visibileColumnCount"
         :value-key="valueKey"
-        @columnChange="columnValueChange(index)">
-      </picker-column>
+        @columnChange="columnValueChange(index)"
+      />
       <div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
     </div>
   </div>
@@ -33,7 +33,7 @@ export default {
   name: 'van-picker',
 
   components: {
-    PickerColumn
+    [PickerColumn.name]: PickerColumn
   },
 
   props: {
diff --git a/packages/search/index.vue b/packages/search/index.vue
index 85fe31b38..8e4b2df90 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -20,14 +20,14 @@
 </template>
 
 <script>
-import VanIcon from '../icon';
+import Icon from '../icon';
 import Clickoutside from '../utils/clickoutside';
 
 export default {
   name: 'van-search',
 
   components: {
-    VanIcon
+    [Icon.name]: Icon
   },
 
   props: {
diff --git a/packages/steps/index.vue b/packages/steps/index.vue
index 91adf1efd..c246f91d3 100644
--- a/packages/steps/index.vue
+++ b/packages/steps/index.vue
@@ -30,7 +30,7 @@ export default {
   name: 'van-steps',
 
   components: {
-    'van-icon': Icon
+    [Icon.name]: Icon
   },
 
   props: {
diff --git a/packages/swipe-item/index.vue b/packages/swipe-item/index.vue
index dafed2fd2..36979841e 100644
--- a/packages/swipe-item/index.vue
+++ b/packages/swipe-item/index.vue
@@ -13,9 +13,9 @@ export default {
   },
 
   destroyed() {
-    const index = this.$parent.swipes.indexOf(this)
+    const index = this.$parent.swipes.indexOf(this);
     if (index > -1) {
-      this.$parent.swipes.splice(index, 1)
+      this.$parent.swipes.splice(index, 1);
     }
   }
 };
diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue
index 4b6d818b6..6d2e642e0 100644
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.vue
@@ -61,27 +61,27 @@ export default {
     }).on('autoPlay', function(dist, isEnd) {
       scroll.movePage(dist.x, isEnd);
     });
-    this.dummy = dummy
+    this.dummy = dummy;
   },
 
   watch: {
     swipes(value) {
       if (this.autoPlay && value.length > 1) {
-        this.dummy.initMove()
+        this.dummy.initMove();
       } else {
-        this.dummy.clearMove()
+        this.dummy.clearMove();
       }
       this.scroll.update();
-      return value
+      return value;
     },
 
     autoPlay(value) {
       if (value && this.swipes.length > 1) {
-        this.dummy.initMove()
+        this.dummy.initMove();
       } else {
-        this.dummy.clearMove()
+        this.dummy.clearMove();
       }
-      return value
+      return value;
     }
   },
 
diff --git a/packages/switch/index.vue b/packages/switch/index.vue
index 3dde8ea05..e8f175984 100644
--- a/packages/switch/index.vue
+++ b/packages/switch/index.vue
@@ -8,22 +8,12 @@
 </template>
 
 <script>
-import VanLoading from '../loading';
-/**
- * van-switch
- * @module components/switch
- * @desc 开关
- * @param {boolean} [value=false] - 开关状态
- * @param {boolean} [disabled=false] - 禁用
- * @param {boolean} [loading=false] - loading状态
- *
- * @example
- * <van-switch :checked="true" :disabled="false"></van-switch>
- */
+import Loading from '../loading';
+
 export default {
   name: 'van-switch',
   components: {
-    'van-loading': VanLoading
+    [Loading.name]: Loading
   },
   props: {
     value: Boolean,
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 0da594a6e..5a9cac1e2 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -192,7 +192,7 @@
             const translate = swipeState.startTranslateLeft + deltaX;
 
             /* istanbul ignore else */
-            if (translate > 0 || (translate * -1) > this.maxTranslate ) return;
+            if (translate > 0 || (translate * -1) > this.maxTranslate) return;
 
             translateUtil.translateElement(el, translate, null);
           },
@@ -200,7 +200,7 @@
           end: () => {
             this.isSwiping = false;
           }
-        })
+        });
       },
 
       doOnValueChange() {
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index 4463165e0..e24bf0990 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -12,9 +12,7 @@
     props: {
       type: {
         type: String,
-        validator: function (val) {
-          return ~ALLOW_TYPE.indexOf(val);
-        }
+        validator: val => ~ALLOW_TYPE.indexOf(val)
       },
       mark: Boolean,
       plain: Boolean
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index a147dd8a4..8bb168e49 100644
--- a/packages/toast/toast.vue
+++ b/packages/toast/toast.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import vanLoading from '../loading';
-import vanIcon from '../icon';
+import Icon from '../icon';
+import Loading from '../loading';
 
 const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
 const DEFAULT_STYLE_LIST = ['success', 'fail'];
@@ -37,8 +37,8 @@ export default {
   name: 'van-toast',
 
   components: {
-    'van-loading': vanLoading,
-    'van-icon': vanIcon
+    [Icon.name]: Icon,
+    [Loading.name]: Loading
   },
   props: {
     type: {

From 956f7f4cdf2374fce16dad497f1e06850560df8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Sat, 26 Aug 2017 09:10:38 +0800
Subject: [PATCH 16/16] DatetimePicker: improve test coverage

---
 packages/datetime-picker/index.vue      |   3 +
 test/unit/index.js                      |   3 +
 test/unit/specs/datetime-picker.spec.js | 122 +++++++++++++++++++++---
 test/unit/utils.js                      |   2 +-
 4 files changed, 116 insertions(+), 14 deletions(-)

diff --git a/packages/datetime-picker/index.vue b/packages/datetime-picker/index.vue
index c89cc77ff..b0fc50386 100644
--- a/packages/datetime-picker/index.vue
+++ b/packages/datetime-picker/index.vue
@@ -270,6 +270,9 @@ export default {
       });
     },
     setColumnByValues(values) {
+      if (!this.$refs.picker) {
+        return;
+      }
       const setColumnValue = this.$refs.picker.setColumnValue;
       if (this.type === 'time') {
         setColumnValue(0, values[0]);
diff --git a/test/unit/index.js b/test/unit/index.js
index 998623e9d..9f20bac30 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -1,5 +1,8 @@
 require('packages/vant-css/src/index.css');
 
+// hack for test touch event
+window.ontouchstart = {};
+
 // 读取配置文件，判断运行单个测试文件还是所有测试文件
 const testsReq = require.context('./specs', true, /\.spec$/);
 if (process.env.TEST_FILE) {
diff --git a/test/unit/specs/datetime-picker.spec.js b/test/unit/specs/datetime-picker.spec.js
index 4b8e37329..edc003faf 100644
--- a/test/unit/specs/datetime-picker.spec.js
+++ b/test/unit/specs/datetime-picker.spec.js
@@ -1,5 +1,20 @@
 import DatetimePicker from 'packages/datetime-picker';
 import { mount } from 'avoriaz';
+import { triggerTouch } from '../utils';
+
+const dragHelper = (el, position) => {
+  triggerTouch(el, 'touchstart', 0, 0);
+  triggerTouch(el, 'touchmove', 0, position / 4);
+  triggerTouch(el, 'touchmove', 0, position / 3);
+  triggerTouch(el, 'touchmove', 0, position / 2);
+  triggerTouch(el, 'touchmove', 0, position);
+  triggerTouch(el, 'touchend', 0, position);
+};
+
+const testTime = '10:00';
+const testDate = new Date('2017/03/10 10:00');
+const minDate = new Date('2000/01/01 00:00');
+const maxDate = new Date('3000/01/01 00:00');
 
 describe('DatetimePicker', () => {
   let wrapper;
@@ -7,36 +22,117 @@ describe('DatetimePicker', () => {
     wrapper && wrapper.destroy();
   });
 
-  it('create a datetime picker', () => {
-    const date = new Date();
+  it('create a time picker', () => {
     wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
       propsData: {
-        type: 'datetime',
-        value: date
+        type: 'time',
+        value: testTime
       }
     });
-    expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
+    expect(wrapper.vm.innerValue).to.equal(testTime);
   });
 
   it('create a date picker', () => {
-    const date = new Date();
     wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
       propsData: {
         type: 'date',
-        value: date
+        value: testDate
       }
     });
-    expect(wrapper.data().innerValue.getTime()).to.equal(date.getTime());
+    expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
   });
 
-  it('create a time picker', () => {
-    const time = '10:00';
+  it('create a datetime picker', () => {
     wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
       propsData: {
-        type: 'time',
-        value: time
+        type: 'datetime',
+        value: testDate
       }
     });
-    expect(wrapper.data().innerValue).to.equal(time);
+    expect(wrapper.vm.innerValue.getTime()).to.equal(testDate.getTime());
+  });
+
+  it('drag time picker', (done) => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'time',
+        value: testTime
+      }
+    });
+
+    const [hour, minute] = wrapper.find('.van-picker-column-wrapper');
+    dragHelper(hour, -50);
+    dragHelper(minute, -50);
+
+    setTimeout(() => {
+      expect(wrapper.vm.innerValue).to.equal('5:05');
+      done();
+    }, 10);
+  });
+
+  it('drag date picker', (done) => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'date',
+        value: testDate,
+        minDate,
+        maxDate
+      }
+    });
+
+    setTimeout(() => {
+      const [year, month, day] = wrapper.find('.van-picker-column-wrapper');
+      dragHelper(year, -50);
+      dragHelper(month, -50);
+      dragHelper(day, -50);
+      setTimeout(() => {
+        const newYear = wrapper.vm.innerValue.getFullYear();
+        const newMonth = wrapper.vm.innerValue.getMonth() + 1;
+        const newDay = wrapper.vm.innerValue.getDate();
+        expect(newYear).to.equal(2022);
+        expect(newMonth).to.equal(8);
+        expect(newDay).to.equal(15);
+        done();
+      }, 10);
+    }, 10);
+  });
+
+  it('drag datetime picker', (done) => {
+    wrapper = mount(DatetimePicker, {
+      attachToDocument: true,
+      propsData: {
+        type: 'datetime',
+        value: testDate,
+        minDate,
+        maxDate
+      }
+    });
+
+    setTimeout(() => {
+      const [year, month, day, hour, minute] = wrapper.find('.van-picker-column-wrapper');
+      dragHelper(year, -50);
+      dragHelper(month, -50);
+      dragHelper(day, -50);
+      dragHelper(hour, -50);
+      dragHelper(minute, -50);
+      setTimeout(() => {
+        const newYear = wrapper.vm.innerValue.getFullYear();
+        const newMonth = wrapper.vm.innerValue.getMonth() + 1;
+        const newDay = wrapper.vm.innerValue.getDate();
+        const newHour = wrapper.vm.innerValue.getHours();
+        const newMinute = wrapper.vm.innerValue.getMinutes();
+        expect(newYear).to.equal(2022);
+        expect(newMonth).to.equal(8);
+        expect(newDay).to.equal(15);
+        expect(newHour).to.equal(15);
+        expect(newMinute).to.equal(5);
+        done();
+      }, 10);
+    }, 10);
   });
 });
diff --git a/test/unit/utils.js b/test/unit/utils.js
index 262356ed2..7e866d70d 100644
--- a/test/unit/utils.js
+++ b/test/unit/utils.js
@@ -62,7 +62,7 @@ export function triggerTouch(wrapper, eventName, x, y) {
     radiusX: 2.5,
     radiusY: 2.5,
     rotationAngle: 10,
-    force: 0.5,
+    force: 0.5
   };
 
   const event = document.createEvent('CustomEvent');