From f828d14d0e1923f2e8c718c47aa61f60a4aa397e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 16 Aug 2017 22:34:25 +0800
Subject: [PATCH] fix: dialog animation not work

---
 packages/actionsheet/src/actionsheet.vue |  6 +-
 packages/badge/src/badge.vue             | 18 +++---
 packages/dialog/src/dialog.js            | 35 ++++++------
 packages/dialog/src/dialog.vue           | 58 ++++++-------------
 packages/vant-css/src/dialog.css         | 71 ++++++++----------------
 5 files changed, 70 insertions(+), 118 deletions(-)

diff --git a/packages/actionsheet/src/actionsheet.vue b/packages/actionsheet/src/actionsheet.vue
index cfd6ffb4a..7d6e4398d 100644
--- a/packages/actionsheet/src/actionsheet.vue
+++ b/packages/actionsheet/src/actionsheet.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="actionsheet-float">
-    <div class="van-actionsheet" :class="[ title ? 'van-actionsheet--withtitle' : '' ]" v-show="currentValue">
+    <div class="van-actionsheet" :class="{ 'van-actionsheet--withtitle': title }" v-show="currentValue">
       <div class="van-actionsheet__header" v-if="title">
         <h3 v-text="title"></h3>
         <van-icon name="close" @click.stop="currentValue = false"></van-icon>
@@ -17,9 +17,7 @@
               <span class="van-actionsheet__name">{{ item.name }}</span>
               <span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
             </template>
-            <template v-else>
-              <van-loading class="van-actionsheet__loading" type="circle" color="black"></van-loading>
-            </template>
+            <van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
           </li>
         </ul>
         <a class="van-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index 6103c1440..7808d6755 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -1,13 +1,13 @@
 <template>
-    <a
-      class="van-badge"
-      :class="{ 'van-badge--select': isSelect }"
-      :href="url"
-      @click="handleClick">
-      <div class="van-badge__active"></div>
-      <div v-if="info" class="van-badge__info">{{info}}</div>
-      {{title}}
-    </a>
+  <a
+    class="van-badge"
+    :class="{ 'van-badge--select': isSelect }"
+    :href="url"
+    @click="handleClick">
+    <div class="van-badge__active"></div>
+    <div v-if="info" class="van-badge__info">{{info}}</div>
+    {{title}}
+  </a>
 </template>
 
 <script>
diff --git a/packages/dialog/src/dialog.js b/packages/dialog/src/dialog.js
index c14ecbab9..bb1fed2f4 100644
--- a/packages/dialog/src/dialog.js
+++ b/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() {
diff --git a/packages/dialog/src/dialog.vue b/packages/dialog/src/dialog.vue
index cdc5796d8..35e21af78 100644
--- a/packages/dialog/src/dialog.vue
+++ b/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();
     }
   }
 };
diff --git a/packages/vant-css/src/dialog.css b/packages/vant-css/src/dialog.css
index eac08827a..a7f77a619 100644
--- a/packages/vant-css/src/dialog.css
+++ b/packages/vant-css/src/dialog.css
@@ -5,17 +5,19 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate3d(-50%, -50%, 0);
-  background-color: #fff;
   width: 85%;
-  border-radius: 4px;
   font-size: 16px;
   overflow: hidden;
-  backface-visibility: hidden;
   transition: .2s;
+  border-radius: 4px;
+  background-color: #fff;
+  backface-visibility: hidden;
+  transform: translate3d(-50%, -50%, 0);
+  
 
   &__header {
     padding: 15px 0 0;
+    text-align: center;
   }
 
   &__content {
@@ -27,75 +29,50 @@
     }
   }
 
-  &__title {
-    text-align: center;
-    padding-left: 0;
-    margin-bottom: 0;
-    font-size: 16px;
-    color: #333;
-  }
-
   &__message {
-    color: #999;
-    margin: 0;
-    font-size: 14px;
     line-height: 1.5;
 
-    &--notitle {
-      color: #333;
-      font-size: 16px;
+    &--withtitle {
+      color: #999;
+      font-size: 14px;
     }
   }
 
   &__footer {
-    font-size: 14px;
     overflow: hidden;
 
     &.is-twobtn {
-      .van-dialog__btn {
+      .van-button {
         width: 50%;
+        float: left;
       }
 
       .van-dialog__cancel {
-        &::after {
+        position: relative;
+
+        &::before {
           @mixin border-retina (right);
+          left: -2px;
         }
       }
     }
   }
 
-  &__btn {
-    font-size: 16px;
-    line-height: 52px;
+  .van-button {
     border: 0;
-    padding: 0;
-    background-color: #fff;
-    float: left;
-    box-sizing: border-box;
-    text-align: center;
-    position: relative;
-  }
-
-  &__cancel {
-    color: #333;
   }
 
   &__confirm {
     color: #00C000;
-    width: 100%;
   }
 
-  &-wrapper {
-    position: absolute;
+  &-bounce-enter {
+    opacity: 0;
+    transform: translate3d(-50%, -50%, 0) scale(0.7);
+  }
+
+  &-bounce-leave-active {
+    opacity: 0;
+    transform: translate3d(-50%, -50%, 0) scale(0.9);
   }
 }
-
-.dialog-bounce-enter {
-  opacity: 0;
-  transform: translate3d(-50%, -50%, 0) scale(0.7);
-}
-
-.dialog-bounce-leave-active {
-  opacity: 0;
-  transform: translate3d(-50%, -50%, 0) scale(0.9);
-}