Browse Source

fix: 解决popup挂载节点api无效的问题

yangkaixuan 4 years ago
parent
commit
3353697e25
1 changed files with 21 additions and 20 deletions
  1. 21 20
      src/packages/popup/popup.vue

+ 21 - 20
src/packages/popup/popup.vue

@@ -34,52 +34,52 @@ const overflowScrollReg = /scroll|auto/i;
 const popupProps = {
   id: {
     type: String | Number,
-    default: '',
+    default: ''
   },
   position: {
     type: String,
-    default: 'center',
+    default: 'center'
   },
 
   transition: String,
 
   closeable: {
     type: Boolean,
-    default: false,
+    default: false
   },
   closeIconPosition: {
     type: String,
-    default: 'top-right',
+    default: 'top-right'
   },
   closeIcon: {
     type: String,
-    default: 'cross',
+    default: 'cross'
   },
 
   closeOnClickOverlay: {
     type: Boolean,
-    default: true,
+    default: true
   },
 
   destroyOnClose: {
     type: Boolean,
-    default: false,
+    default: false
   },
   getContainer: String,
   round: {
     type: Boolean,
-    default: false,
-  },
+    default: false
+  }
 };
 export default {
   name: 'nut-popup',
   mixins: [touchMixins],
   components: {
-    icon: Icon,
+    icon: Icon
   },
   props: {
     ...overlayProps,
-    ...popupProps,
+    ...popupProps
   },
   created() {
     this.transition ? (this.transitionName = this.transition) : (this.transitionName = `popup-slide-${this.position}`);
@@ -88,6 +88,7 @@ export default {
     if (this.value) {
       this.open();
     }
+    this.portal();
   },
   beforeDestroy() {
     if (this.value) {
@@ -115,19 +116,19 @@ export default {
       val === 'center' ? (this.transitionName = 'popup-fade') : (this.transitionName = `popup-slide-${this.position}`);
     },
     getContainer: 'portal',
-    overlay: 'renderOverlay',
+    overlay: 'renderOverlay'
   },
   data() {
     return {
       showSlot: true,
       transitionName: 'popup-fade-center',
-      overlayInstant: null,
+      overlayInstant: null
     };
   },
   computed: {
     transitionDuration() {
       return this.duration ? this.duration + 's' : 'initial';
-    },
+    }
   },
 
   methods: {
@@ -149,7 +150,7 @@ export default {
         overlayClass,
         overlayStyle,
         lockScroll,
-        closeOnClickOverlay,
+        closeOnClickOverlay
       };
 
       this.renderOverlay(config);
@@ -229,20 +230,20 @@ export default {
     },
     portal() {
       const { getContainer } = this;
-      const el = this.$el;
 
+      const el = this.$el;
       let container;
       if (getContainer) {
         container = this.getElement(getContainer);
-      } else if (this.$parent) {
-        container = this.$parent.$el;
+      } else {
+        return;
       }
 
       if (container && container !== el.parentNode) {
         container.appendChild(el);
       }
-    },
-  },
+    }
+  }
 };
 export { popupProps };
 </script>