|
@@ -34,48 +34,48 @@ const overflowScrollReg = /scroll|auto/i;
|
|
|
const popupProps = {
|
|
const popupProps = {
|
|
|
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}`);
|
|
@@ -111,19 +111,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: {
|
|
@@ -144,7 +144,7 @@ export default {
|
|
|
overlayClass,
|
|
overlayClass,
|
|
|
overlayStyle,
|
|
overlayStyle,
|
|
|
lockScroll,
|
|
lockScroll,
|
|
|
- closeOnClickOverlay
|
|
|
|
|
|
|
+ closeOnClickOverlay,
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
this.renderOverlay(config);
|
|
this.renderOverlay(config);
|
|
@@ -178,7 +178,9 @@ export default {
|
|
|
const { scrollHeight, offsetHeight, scrollTop } = el ? el : this.$el;
|
|
const { scrollHeight, offsetHeight, scrollTop } = el ? el : this.$el;
|
|
|
|
|
|
|
|
if ((this.deltaY > 0 && scrollTop === 0) || (this.deltaY < 0 && scrollTop + offsetHeight >= scrollHeight)) {
|
|
if ((this.deltaY > 0 && scrollTop === 0) || (this.deltaY < 0 && scrollTop + offsetHeight >= scrollHeight)) {
|
|
|
- event.preventDefault();
|
|
|
|
|
|
|
+ if (event.cancelable) {
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
getScroller(el) {
|
|
getScroller(el) {
|
|
@@ -234,8 +236,8 @@ export default {
|
|
|
if (container && container !== el.parentNode) {
|
|
if (container && container !== el.parentNode) {
|
|
|
container.appendChild(el);
|
|
container.appendChild(el);
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
};
|
|
};
|
|
|
export { popupProps };
|
|
export { popupProps };
|
|
|
</script>
|
|
</script>
|