import { VantComponent } from '../common/component'; import { transition } from '../mixins/transition'; VantComponent({ classes: [ 'enter-class', 'enter-active-class', 'enter-to-class', 'leave-class', 'leave-active-class', 'leave-to-class', 'close-icon-class', ], mixins: [transition(false)], props: { round: Boolean, closeable: Boolean, customStyle: String, overlayStyle: String, transition: { type: String, observer: 'observeClass', }, zIndex: { type: Number, value: 100, }, overlay: { type: Boolean, value: true, }, closeIcon: { type: String, value: 'cross', }, closeIconPosition: { type: String, value: 'top-right', }, closeOnClickOverlay: { type: Boolean, value: true, }, position: { type: String, value: 'center', observer: 'observeClass', }, safeAreaInsetBottom: { type: Boolean, value: true, }, safeAreaInsetTop: { type: Boolean, value: false, }, safeAreaTabBar: { type: Boolean, value: false, }, lockScroll: { type: Boolean, value: true, }, rootPortal: { type: Boolean, value: false, }, }, created() { this.observeClass(); }, methods: { onClickCloseIcon() { this.$emit('close'); }, onClickOverlay() { this.$emit('click-overlay'); if (this.data.closeOnClickOverlay) { this.$emit('close'); } }, observeClass() { const { transition, position, duration } = this.data; const updateData = { name: transition || position, }; if (transition === 'none') { updateData.duration = 0; this.originDuration = duration; } else if (this.originDuration != null) { updateData.duration = this.originDuration; } this.setData(updateData); }, }, });