Dialog: support both function call and component call

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);
     }
   }

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
+};

packages/vant-css/src/button.css

@@ -11,7 +11,6 @@
   font-size: 16px;
   text-align: center;
   outline: 0;
-  overflow: hidden;
   -webkit-appearance: none;
 
   &::after {

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 {