fix: dialog animation not work
This commit is contained in:
@@ -1,31 +1,29 @@
|
||||
<template>
|
||||
<transition name="dialog-bounce">
|
||||
<div class="van-dialog-wrapper">
|
||||
<div class="van-dialog" v-show="value">
|
||||
<div class="van-dialog__header" v-if="title">
|
||||
<div class="van-dialog__title" v-text="title"></div>
|
||||
</div>
|
||||
<div class="van-dialog__content" v-if="message">
|
||||
<div class="van-dialog__message" :class="{ 'van-dialog__message--notitle': !title }" v-html="message"></div>
|
||||
</div>
|
||||
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="van-dialog__btn van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="van-dialog__btn van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
</div>
|
||||
<transition name="van-dialog-bounce">
|
||||
<div class="van-dialog" v-show="value">
|
||||
<div class="van-dialog__header" v-if="title" v-text="title" />
|
||||
<div class="van-dialog__content" v-if="message">
|
||||
<div class="van-dialog__message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
|
||||
</div>
|
||||
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button>
|
||||
<van-button size="large" class="van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '../../button';
|
||||
import Popup from '../../mixins/popup';
|
||||
|
||||
const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确定';
|
||||
|
||||
export default {
|
||||
name: 'van-dialog',
|
||||
|
||||
components: {
|
||||
[Button.name]: Button
|
||||
},
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
@@ -47,38 +45,16 @@ export default {
|
||||
type: '',
|
||||
showConfirmButton: true,
|
||||
showCancelButton: false,
|
||||
confirmButtonText: CONFIRM_TEXT,
|
||||
cancelButtonText: CANCEL_TEXT,
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
callback: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleAction(action) {
|
||||
this.value = false;
|
||||
this.$emit('input', false);
|
||||
this.callback && this.callback(action);
|
||||
},
|
||||
|
||||
close() {
|
||||
/* istanbul ignore if */
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.value = false;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.overlay && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user