[new feature] Dialog: support component call (#593)

packages/dialog/index.js

@@ -1,31 +1,10 @@
 import Vue from 'vue';
-import DialogComponent from './dialog';
+import VanDialog from './dialog';
 
 let instance;
 
-const defaultOptions = {
-  value: true,
-  title: '',
-  message: '',
-  overlay: true,
-  lockOnScroll: true,
-  confirmButtonText: '',
-  cancelButtonText: '',
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnClickOverlay: false,
-  callback: action => {
-    instance[action === 'confirm' ? 'resolve' : 'reject'](action);
-  }
-};
-
-let currentDefaultOptions = {
-  ...defaultOptions
-};
-
 const initInstance = () => {
-  const DialogConstructor = Vue.extend(DialogComponent);
-  instance = new DialogConstructor({
+  instance = new (Vue.extend(VanDialog))({
     el: document.createElement('div')
   });
 
@@ -50,13 +29,29 @@ const Dialog = options => {
   });
 };
 
+Dialog.defaultOptions = {
+  value: true,
+  title: '',
+  message: '',
+  overlay: true,
+  lockOnScroll: true,
+  confirmButtonText: '',
+  cancelButtonText: '',
+  showConfirmButton: true,
+  showCancelButton: false,
+  closeOnClickOverlay: false,
+  callback: action => {
+    instance[action === 'confirm' ? 'resolve' : 'reject'](action);
+  }
+};
+
 Dialog.alert = options => Dialog({
-  ...currentDefaultOptions,
+  ...Dialog.currentOptions,
   ...options
 });
 
 Dialog.confirm = options => Dialog({
-  ...currentDefaultOptions,
+  ...Dialog.currentOptions,
   showCancelButton: true,
   ...options
 });
@@ -65,22 +60,19 @@ Dialog.close = () => {
   instance.value = false;
 };
 
-Dialog.setDefaultOptions = (options = {}) => {
-  currentDefaultOptions = {
-    ...currentDefaultOptions,
-    ...options
-  };
+Dialog.setDefaultOptions = options => {
+  Object.assign(Dialog.currentOptions, options);
 };
 
 Dialog.resetDefaultOptions = () => {
-  currentDefaultOptions = {
-    ...defaultOptions
-  };
+  Dialog.currentOptions = { ...Dialog.defaultOptions };
+};
+
+Dialog.install = () => {
+  Vue.component(VanDialog.name, VanDialog);
 };
 
 Vue.prototype.$dialog = Dialog;
+Dialog.resetDefaultOptions();
 
 export default Dialog;
-export {
-  DialogComponent as Dialog
-};

packages/index.js

@@ -84,6 +84,7 @@ const components = [
   CouponCell,
   CouponList,
   DatetimePicker,
+  Dialog,
   Field,
   GoodsAction,
   GoodsActionBigBtn,

packages/vant-css/src/dialog.css

@@ -18,8 +18,6 @@
   }
 
   &__content {
-    padding: 15px 20px;
-
     &::after {
       border-bottom-width: 1px;
     }
@@ -27,6 +25,7 @@
 
   &__message {
     line-height: 1.5;
+    padding: 15px 20px;
 
     &--withtitle {
       color: $gray-dark;