blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Popup): should watch lockScroll (#8169)

Browse Source 
* fix(Popup): should watch lockScroll

* chore: oreder

* chore: upd

* chore: upd
This commit is contained in:
neverland 2021-02-16 16:22:34 +08:00 committed by GitHub
parent f7b09d1677
commit 86b276caa5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/composables/use-lock-scroll.ts
View File

@ -1,5 +1,9 @@
import { Ref } from 'vue'; import { Ref, watch, onBeforeUnmount, onDeactivated } from 'vue';
import { getScrollParent, supportsPassive } from '@vant/use'; import {
getScrollParent,
supportsPassive,
onMountedOrActivated,
} from '@vant/use';
import { useTouch } from './use-touch'; import { useTouch } from './use-touch';
import { preventDefault } from '../utils'; import { preventDefault } from '../utils';
@ -40,24 +44,22 @@ export function useLockScroll(
}; };
const lock = () => { const lock = () => {
if (shouldLock()) { document.addEventListener('touchstart', touch.start);
document.addEventListener('touchstart', touch.start); document.addEventListener(
document.addEventListener( 'touchmove',
'touchmove', onTouchMove,
onTouchMove, supportsPassive ? { passive: false } : false
supportsPassive ? { passive: false } : false );
);
if (!totalLockCount) { if (!totalLockCount) {
document.body.classList.add(BODY_LOCK_CLASS); document.body.classList.add(BODY_LOCK_CLASS);
}
totalLockCount++;
} }
totalLockCount++;
}; };
const unlock = () => { const unlock = () => {
if (shouldLock() && totalLockCount) { if (totalLockCount) {
document.removeEventListener('touchstart', touch.start); document.removeEventListener('touchstart', touch.start);
document.removeEventListener('touchmove', onTouchMove); document.removeEventListener('touchmove', onTouchMove);
@ -69,5 +71,23 @@ export function useLockScroll(
} }
}; };
return [lock, unlock]; const init = () => {
if (shouldLock()) {
lock();
}
};
const destroy = () => {
if (shouldLock()) {
unlock();
}
};
onMountedOrActivated(init);
onDeactivated(destroy);
onBeforeUnmount(destroy);
watch(shouldLock, (value) => {
value ? lock() : unlock();
});
} }

16
src/popup/index.tsx
View File

@ -11,7 +11,6 @@ import {
CSSProperties, CSSProperties,
TeleportProps, TeleportProps,
onDeactivated, onDeactivated,
onBeforeUnmount,
} from 'vue'; } from 'vue';
import { createNamespace, isDef, UnknownProp } from '../utils'; import { createNamespace, isDef, UnknownProp } from '../utils';
@ -116,11 +115,6 @@ export default createComponent({
const zIndex = ref<number>(); const zIndex = ref<number>();
const popupRef = ref<HTMLElement>(); const popupRef = ref<HTMLElement>();
const [lockScroll, unlockScroll] = useLockScroll(
popupRef,
() => props.lockScroll
);
const lazyRender = useLazyRender(() => props.show || !props.lazyRender); const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
const style = computed(() => { const style = computed(() => {
@ -146,7 +140,6 @@ export default createComponent({
} }
opened = true; opened = true;
lockScroll();
zIndex.value = ++globalZIndex; zIndex.value = ++globalZIndex;
} }
}; };
@ -154,7 +147,6 @@ export default createComponent({
const close = () => { const close = () => {
if (opened) { if (opened) {
opened = false; opened = false;
unlockScroll();
emit('update:show', false); emit('update:show', false);
} }
}; };
@ -258,6 +250,8 @@ export default createComponent({
useExpose({ popupRef }); useExpose({ popupRef });
useLockScroll(popupRef, () => props.show && props.lockScroll);
useEventListener('popstate', () => { useEventListener('popstate', () => {
if (props.closeOnPopstate) { if (props.closeOnPopstate) {
close(); close();
@ -285,12 +279,6 @@ export default createComponent({
} }
}); });
onBeforeUnmount(() => {
if (opened) {
unlockScroll();
}
});
return () => { return () => {
if (props.teleport) { if (props.teleport) {
return ( return (