fix: dialog animation not work

This commit is contained in:
陈嘉涵
2017-08-16 22:34:25 +08:00
parent 6b1f38a382
commit f828d14d0e
5 changed files with 70 additions and 118 deletions
+17 -41
View File
@@ -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();
}
}
};