Dialog: remove v-model, add append-to-body

packages/dialog/src/component.vue

@@ -3,15 +3,19 @@
     <div class="el-dialog__wrapper" v-show="visible" @click.self="handleWrapperClick">
       <div
         class="el-dialog"
-        :class="[sizeClass, customClass]"
+        :class="[{ 'is-fullscreen': fullscreen }, customClass]"
         ref="dialog"
         :style="style">
         <div class="el-dialog__header">
           <slot name="title">
-            <span class="el-dialog__title">{{title}}</span>
+            <span class="el-dialog__title">{{ title }}</span>
           </slot>
-          <button type="button" class="el-dialog__headerbtn" aria-label="Close" 
-                  v-if="showClose" @click="handleClose">
+          <button
+            type="button"
+            class="el-dialog__headerbtn"
+            aria-label="Close"
+            v-if="showClose"
+            @click="handleClose">
             <i class="el-dialog__close el-icon el-icon-close"></i>
           </button>
         </div>
@@ -43,12 +47,17 @@
         type: Boolean,
         default: true
       },
-  
+
       modalAppendToBody: {
         type: Boolean,
         default: true
       },
 
+      appendToBody: {
+        type: Boolean,
+        default: false
+      },
+
       lockScroll: {
         type: Boolean,
         default: true
@@ -69,10 +78,9 @@
         default: true
       },
 
-      size: {
-        type: String,
-        default: 'small'
-      },
+      width: String,
+
+      fullscreen: Boolean,
 
       customClass: {
         type: String,
@@ -81,7 +89,7 @@
 
       top: {
         type: String,
-        default: '15%'
+        default: '15vh'
       },
       beforeClose: Function
     },
@@ -95,6 +103,9 @@
           this.$nextTick(() => {
             this.$refs.dialog.scrollTop = 0;
           });
+          if (this.appendToBody) {
+            document.body.appendChild(this.$el);
+          }
         } else {
           this.$el.removeEventListener('scroll', this.updatePopper);
           this.$emit('close');
@@ -103,11 +114,15 @@
     },
 
     computed: {
-      sizeClass() {
-        return `el-dialog--${ this.size }`;
-      },
       style() {
-        return this.size === 'full' ? {} : { 'top': this.top };
+        let style = {};
+        if (this.width) {
+          style.width = this.width;
+        }
+        if (!this.fullscreen) {
+          style.marginTop = this.top;
+        }
+        return style;
       }
     },
 
@@ -126,7 +141,6 @@
       hide(cancel) {
         if (cancel !== false) {
           this.$emit('update:visible', false);
-          this.$emit('visible-change', false);
         }
       },
       updatePopper() {
@@ -139,6 +153,9 @@
       if (this.visible) {
         this.rendered = true;
         this.open();
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
       }
     }
   };