fix(Popup): duration prop not work when position is center

This commit is contained in:
陈嘉涵 2020-01-28 21:57:29 +08:00
parent 4fba295ea1
commit 44072e8c3f
4 changed files with 21 additions and 5 deletions

View File

@ -30,7 +30,7 @@ export type ActionSheetProps = PopupMixinProps & {
round: boolean;
title?: string;
actions?: ActionSheetItem[];
duration: number;
duration: number | string;
closeIcon: string;
cancelText?: string;
description?: string;

View File

@ -49,14 +49,16 @@ export default createComponent({
}
const { round, position, duration } = this;
const isCenter = position === 'center';
const transitionName =
this.transition ||
(position === 'center' ? 'van-fade' : `van-popup-slide-${position}`);
(isCenter ? 'van-fade' : `van-popup-slide-${position}`);
const style = {};
if (isDef(duration)) {
style.transitionDuration = `${duration}s`;
const key = isCenter ? 'animationDuration' : 'transitionDuration';
style[key] = `${duration}s`;
}
return (

View File

@ -5,7 +5,9 @@ exports[`close-icon prop 1`] = `
<!----></i></div>
`;
exports[`duration prop 1`] = `<div class="van-popup van-popup--center" style="transition-duration: 0.5s;" name="van-fade"></div>`;
exports[`duration prop when position is center 1`] = `<div class="van-popup van-popup--center" style="animation-duration: 0.5s;" name="van-fade"></div>`;
exports[`duration prop when position is top 1`] = `<div class="van-popup van-popup--top" style="transition-duration: 0.5s;" name="van-popup-slide-top"></div>`;
exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;

View File

@ -206,7 +206,7 @@ test('click event', () => {
expect(wrapper.emitted('click')).toBeTruthy();
});
test('duration prop', () => {
test('duration prop when position is center', () => {
const wrapper = mount(Popup, {
propsData: {
value: true,
@ -217,6 +217,18 @@ test('duration prop', () => {
expect(wrapper).toMatchSnapshot();
});
test('duration prop when position is top', () => {
const wrapper = mount(Popup, {
propsData: {
value: true,
duration: 0.5,
position: 'top',
},
});
expect(wrapper).toMatchSnapshot();
});
test('round prop', () => {
const wrapper = mount(Popup, {
propsData: {