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