123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- 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
- }
- })])]);
- }
- });
|