fix: dialog animation not work

packages/dialog/src/dialog.js

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import Dialog from './dialog.vue';
-import merge from '../../utils/merge';
 
 const DialogConstructor = Vue.extend(Dialog);
 
@@ -20,10 +19,14 @@ const defaultCallback = action => {
 };
 
 const initInstance = () => {
+  console.log('init instance');
   instance = new DialogConstructor({
     el: document.createElement('div')
   });
 
+  instance.$on('input', value => {
+    instance.value = value;
+  })
   instance.callback = defaultCallback;
 };
 
@@ -34,9 +37,10 @@ const showNextDialog = () => {
 
   /* istanbul ignore else */
   if (!instance.value && dialogQueue.length > 0) {
+    console.log('shift instance');
     currentDialog = dialogQueue.shift();
 
-    const options = currentDialog.options;
+    const { options } = currentDialog;
 
     for (const prop in options) {
       /* istanbul ignore else */
@@ -45,22 +49,17 @@ const showNextDialog = () => {
       }
     }
 
-    if (options.callback === undefined) {
-      instance.callback = defaultCallback;
-    }
-
+    instance.callback = options.callback || defaultCallback;
+    instance.value = true;
     document.body.appendChild(instance.$el);
-
-    Vue.nextTick(() => {
-      instance.value = true;
-    });
   }
 };
 
 var DialogBox = options => {
   return new Promise((resolve, reject) => { // eslint-disable-line
+    console.log('push instance');
     dialogQueue.push({
-      options: merge({ ...options }),
+      options: { ...options },
       callback: options.callback,
       resolve: resolve,
       reject: reject
@@ -71,23 +70,25 @@ var DialogBox = options => {
 };
 
 DialogBox.alert = function(options) {
-  return DialogBox(merge({
+  return DialogBox({
     type: 'alert',
     title: '',
     message: '',
     closeOnClickOverlay: false,
-    showCancelButton: false
-  }, options));
+    showCancelButton: false,
+    ...options
+  });
 };
 
 DialogBox.confirm = function(options) {
-  return DialogBox(merge({
+  return DialogBox({
     type: 'confirm',
     title: '',
     message: '',
     closeOnClickOverlay: true,
-    showCancelButton: true
-  }, options));
+    showCancelButton: true,
+    ...options
+  });
 };
 
 DialogBox.close = function() {

packages/dialog/src/dialog.vue

@@ -1,31 +1,29 @@
 <template>
-  <transition name="dialog-bounce">
-    <div class="van-dialog-wrapper">
-      <div class="van-dialog" v-show="value">
-        <div class="van-dialog__header" v-if="title">
-          <div class="van-dialog__title" v-text="title"></div>
-        </div>
-        <div class="van-dialog__content" v-if="message">
-          <div class="van-dialog__message" :class="{ 'van-dialog__message--notitle': !title }" v-html="message"></div>
-        </div>
-        <div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="van-dialog__btn van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="van-dialog__btn van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
-        </div>
+  <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>
+      <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>
+        <van-button size="large" class="van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</van-button>
       </div>
     </div>
   </transition>
 </template>
 
 <script>
+import Button from '../../button';
 import Popup from '../../mixins/popup';
 
-const CANCEL_TEXT = '取消';
-const CONFIRM_TEXT = '确定';
-
 export default {
   name: 'van-dialog',
 
+  components: {
+    [Button.name]: Button
+  },
+
   mixins: [Popup],
 
   props: {
@@ -47,38 +45,16 @@ export default {
       type: '',
       showConfirmButton: true,
       showCancelButton: false,
-      confirmButtonText: CONFIRM_TEXT,
-      cancelButtonText: CANCEL_TEXT,
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
       callback: null
     };
   },
 
   methods: {
     handleAction(action) {
-      this.value = false;
+      this.$emit('input', false);
       this.callback && this.callback(action);
-    },
-
-    close() {
-      /* istanbul ignore if */
-      if (this.closing) return;
-
-      this.closing = true;
-
-      this.value = false;
-
-      /* istanbul ignore else */
-      if (this.lockOnScroll) {
-        setTimeout(() => {
-          if (this.overlay && this.bodyOverflow !== 'hidden') {
-            document.body.style.overflow = this.bodyOverflow;
-          }
-          this.bodyOverflow = null;
-        }, 200);
-      }
-
-      this.opened = false;
-      this.doAfterClose();
     }
   }
 };