dialog component

docs/examples/dialog.md

@@ -7,6 +7,8 @@ export default {
       Dialog.alert({
         title: 'alert',
         message: 'alert message'
+      }).then((action) => {
+        console.log(action);
       });
     },
 
@@ -14,6 +16,10 @@ export default {
       Dialog.confirm({
         title: 'confirm',
         message: 'confirm message'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
       });
     }
   }

packages/dialog/src/dialog.js

@@ -16,9 +16,9 @@ const defaultCallback = action => {
       callback(action);
     }
 
-    if (currentDialog.resolve && action !== 'cancel') {
+    if (currentDialog.resolve && action === 'confirm') {
       currentDialog.resolve(action);
-    } else {
+    } else if (currentDialog.reject && action === 'cancel') {
       currentDialog.reject(action);
     }
   }
@@ -47,7 +47,6 @@ var showNextDialog = () => {
         instance[prop] = options[prop];
       }
     }
-    console.log(instance)
 
     if (options.callback === undefined) {
       instance.callback = defaultCallback;
@@ -62,7 +61,6 @@ var showNextDialog = () => {
 };
 
 var DialogBox = options => {
-  console.log(options)
   return new Promise((resolve, reject) => { // eslint-disable-line
     dialogQueue.push({
       options: merge({}, options),
@@ -78,13 +76,15 @@ var DialogBox = options => {
 DialogBox.alert = function(options) {
   return DialogBox(merge({
     type: 'alert',
-    closeOnClickOverlay: false
+    closeOnClickOverlay: false,
+    showCancelButton: false
   }, options));
 };
 
 DialogBox.confirm = function(options) {
   return DialogBox(merge({
     type: 'confirm',
+    closeOnClickOverlay: true,
     showCancelButton: true
   }, options));
 };

packages/dialog/src/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="dialog-fade">
+  <transition name="dialog-bounce">
     <div class="o2-dialog-wrapper">
       <div class="o2-dialog" v-show="value">
         <div class="o2-dialog-header" v-if="title">
@@ -19,6 +19,7 @@
 
 <script>
 import Popup from 'packages/popup';
+import PopupManager from 'src/mixins/popup/popup-manager';
 
 const CANCEL_TEXT = '取消';
 const CONFIRM_TEXT = '确认';
@@ -57,6 +58,29 @@ export default {
     handleAction(action) {
       this.value = false;
       this.callback && this.callback(action);
+    },
+
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.value = false;
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+            document.body.style.paddingRight = this.bodyPaddingRight;
+          }
+          this.bodyOverflow = null;
+          this.bodyPaddingRight = null;
+        }, 200);
+      }
+
+      PopupManager.closeModal(this._popupId);
+      this.opened = false;
+      this.closing = false;
     }
   }
 };

packages/zanui/src/dialog.pcss

@@ -85,3 +85,12 @@
     }
   }
 }
+
+.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);
+}