github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: drawer throw error when unmounted

Browse Source
pull/3197/head^2
tanjinzhou 4 years ago
parent c1102df3f0
commit 848d6497e6
1 changed files with 57 additions and 53 deletions
Show Stats Download Patch File Download Diff File

110
components/vc-drawer/src/Drawer.js
Unescape View File

@ -242,7 +242,7 @@ const Drawer = defineComponent({
const { placement, levelMove, duration, ease, getContainer } = this.$props; const { placement, levelMove, duration, ease, getContainer } = this.$props;
if (!windowIsUndefined) { if (!windowIsUndefined) {
this.levelDom.forEach(dom => { this.levelDom.forEach(dom => {
if (this.isOpenChange || openTransition) { if (dom && (this.isOpenChange || openTransition)) {
/* eslint no-param-reassign: "error" */ /* eslint no-param-reassign: "error" */
dom.style.transition = `transform ${duration} ${ease}`; dom.style.transition = `transform ${duration} ${ease}`;
addEventListener(dom, transitionEnd, this.trnasitionEnd); addEventListener(dom, transitionEnd, this.trnasitionEnd);
@ -275,27 +275,29 @@ const Drawer = defineComponent({
if (right) { if (right) {
document.body.style.position = 'relative'; document.body.style.position = 'relative';
document.body.style.width = `calc(100% - ${right}px)`; document.body.style.width = `calc(100% - ${right}px)`;
this.dom.style.transition = 'none';
switch (placement) {
case 'right':
this.dom.style.transform = `translateX(-${right}px)`;
this.dom.style.msTransform = `translateX(-${right}px)`;
break;
case 'top':
case 'bottom':
this.dom.style.width = `calc(100% - ${right}px)`;
this.dom.style.transform = 'translateZ(0)';
break;
default:
break;
}
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { if (this.dom) {
this.dom.style.transition = `${trannsformTransition},${widthTransition}`; this.dom.style.transition = 'none';
this.dom.style.width = ''; switch (placement) {
this.dom.style.transform = ''; case 'right':
this.dom.style.msTransform = ''; this.dom.style.transform = `translateX(-${right}px)`;
}); this.dom.style.msTransform = `translateX(-${right}px)`;
break;
case 'top':
case 'bottom':
this.dom.style.width = `calc(100% - ${right}px)`;
this.dom.style.transform = 'translateZ(0)';
break;
default:
break;
}
this.timeout = setTimeout(() => {
this.dom.style.transition = `${trannsformTransition},${widthTransition}`;
this.dom.style.width = '';
this.dom.style.transform = '';
this.dom.style.msTransform = '';
});
}
} }
// 手机禁滚 // 手机禁滚
domArray.forEach((item, i) => { domArray.forEach((item, i) => {
@ -317,41 +319,43 @@ const Drawer = defineComponent({
if (transitionStr) { if (transitionStr) {
document.body.style.overflowX = 'hidden'; document.body.style.overflowX = 'hidden';
} }
this.dom.style.transition = 'none'; if (placement === 'right' && this.maskDom) {
let heightTransition; this.maskDom.style.left = `-${right}px`;
switch (placement) { this.maskDom.style.width = `calc(100% + ${right}px)`;
case 'right': { }
this.dom.style.transform = `translateX(${right}px)`; clearTimeout(this.timeout);
this.dom.style.msTransform = `translateX(${right}px)`; if (this.dom) {
this.dom.style.width = '100%'; this.dom.style.transition = 'none';
widthTransition = `width 0s ${ease} ${duration}`; let heightTransition;
if (this.maskDom) { switch (placement) {
this.maskDom.style.left = `-${right}px`; case 'right': {
this.maskDom.style.width = `calc(100% + ${right}px)`; this.dom.style.transform = `translateX(${right}px)`;
this.dom.style.msTransform = `translateX(${right}px)`;
this.dom.style.width = '100%';
widthTransition = `width 0s ${ease} ${duration}`;
break;
} }
break; case 'top':
} case 'bottom': {
case 'top': this.dom.style.width = `calc(100% + ${right}px)`;
case 'bottom': { this.dom.style.height = '100%';
this.dom.style.width = `calc(100% + ${right}px)`; this.dom.style.transform = 'translateZ(0)';
this.dom.style.height = '100%'; heightTransition = `height 0s ${ease} ${duration}`;
this.dom.style.transform = 'translateZ(0)'; break;
heightTransition = `height 0s ${ease} ${duration}`; }
break; default:
break;
} }
default: this.timeout = setTimeout(() => {
break; this.dom.style.transition = `${trannsformTransition},${
heightTransition ? `${heightTransition},` : ''
}${widthTransition}`;
this.dom.style.transform = '';
this.dom.style.msTransform = '';
this.dom.style.width = '';
this.dom.style.height = '';
});
} }
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.dom.style.transition = `${trannsformTransition},${
heightTransition ? `${heightTransition},` : ''
}${widthTransition}`;
this.dom.style.transform = '';
this.dom.style.msTransform = '';
this.dom.style.width = '';
this.dom.style.height = '';
});
} }
domArray.forEach((item, i) => { domArray.forEach((item, i) => {
if (!item) { if (!item) {

Write Preview
Loading…
Cancel
Save