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 1/3] 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 2/3] 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 3/3] 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');