111 lines
2.6 KiB
JavaScript
111 lines
2.6 KiB
JavaScript
import { createNamespace, isDef } from '../utils';
|
|
import { PopupMixin } from '../mixins/popup';
|
|
import Icon from '../icon';
|
|
|
|
var _createNamespace = createNamespace('popup'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
export default createComponent({
|
|
mixins: [PopupMixin()],
|
|
props: {
|
|
round: Boolean,
|
|
duration: [Number, String],
|
|
closeable: Boolean,
|
|
transition: String,
|
|
safeAreaInsetBottom: Boolean,
|
|
closeIcon: {
|
|
type: String,
|
|
default: 'cross'
|
|
},
|
|
closeIconPosition: {
|
|
type: String,
|
|
default: 'top-right'
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'center'
|
|
},
|
|
overlay: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
closeOnClickOverlay: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
beforeCreate: function beforeCreate() {
|
|
var _this = this;
|
|
|
|
var createEmitter = function createEmitter(eventName) {
|
|
return function (event) {
|
|
return _this.$emit(eventName, event);
|
|
};
|
|
};
|
|
|
|
this.onClick = createEmitter('click');
|
|
this.onOpened = createEmitter('opened');
|
|
this.onClosed = createEmitter('closed');
|
|
},
|
|
methods: {
|
|
onClickCloseIcon: function onClickCloseIcon(event) {
|
|
this.$emit('click-close-icon', event);
|
|
this.close();
|
|
}
|
|
},
|
|
render: function render() {
|
|
var _bem;
|
|
|
|
var h = arguments[0];
|
|
|
|
if (!this.shouldRender) {
|
|
return;
|
|
}
|
|
|
|
var round = this.round,
|
|
position = this.position,
|
|
duration = this.duration;
|
|
var isCenter = position === 'center';
|
|
var transitionName = this.transition || (isCenter ? 'van-fade' : "van-popup-slide-" + position);
|
|
var style = {};
|
|
|
|
if (isDef(duration)) {
|
|
var key = isCenter ? 'animationDuration' : 'transitionDuration';
|
|
style[key] = duration + "s";
|
|
}
|
|
|
|
return h("transition", {
|
|
"attrs": {
|
|
"appear": this.transitionAppear,
|
|
"name": transitionName
|
|
},
|
|
"on": {
|
|
"afterEnter": this.onOpened,
|
|
"afterLeave": this.onClosed
|
|
}
|
|
}, [h("div", {
|
|
"directives": [{
|
|
name: "show",
|
|
value: this.value
|
|
}],
|
|
"style": style,
|
|
"class": bem((_bem = {
|
|
round: round
|
|
}, _bem[position] = position, _bem['safe-area-inset-bottom'] = this.safeAreaInsetBottom, _bem)),
|
|
"on": {
|
|
"click": this.onClick
|
|
}
|
|
}, [this.slots(), this.closeable && h(Icon, {
|
|
"attrs": {
|
|
"role": "button",
|
|
"tabindex": "0",
|
|
"name": this.closeIcon
|
|
},
|
|
"class": bem('close-icon', this.closeIconPosition),
|
|
"on": {
|
|
"click": this.onClickCloseIcon
|
|
}
|
|
})])]);
|
|
}
|
|
}); |