mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore: remove hooks ooops!
This commit is contained in:
parent
046ce7e2fe
commit
8d4d965a85
@ -1,21 +0,0 @@
|
||||
import { Ref } from 'vue';
|
||||
import { useGlobalEvent } from './use-global-event';
|
||||
|
||||
export type UseClickOutsideOpitons = {
|
||||
event: string;
|
||||
callback: EventListener;
|
||||
element: Ref<Element>;
|
||||
flag?: Ref<boolean>;
|
||||
};
|
||||
|
||||
export function useClickOutside(options: UseClickOutsideOpitons) {
|
||||
const { event = 'click', callback, element, flag } = options;
|
||||
|
||||
function onClick(event: Event) {
|
||||
if (!element.value.contains(event.target as Node)) {
|
||||
callback(event);
|
||||
}
|
||||
}
|
||||
|
||||
useGlobalEvent(document, event, onClick, false, flag);
|
||||
}
|
@ -1,46 +0,0 @@
|
||||
import { on, off } from '../utils/dom/event';
|
||||
import {
|
||||
Ref,
|
||||
watch,
|
||||
onMounted,
|
||||
onActivated,
|
||||
onUnmounted,
|
||||
onDeactivated
|
||||
} from 'vue';
|
||||
|
||||
export function useGlobalEvent(
|
||||
target: EventTarget,
|
||||
event: string,
|
||||
handler: EventListener,
|
||||
passive = false,
|
||||
flag?: Ref<boolean>
|
||||
) {
|
||||
let binded: boolean;
|
||||
|
||||
function add() {
|
||||
if (binded || (flag && !flag.value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
on(target, event, handler, passive);
|
||||
binded = true;
|
||||
}
|
||||
|
||||
function remove() {
|
||||
if (binded) {
|
||||
off(target, event, handler);
|
||||
binded = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (flag) {
|
||||
watch(() => {
|
||||
flag.value ? add() : remove();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(add);
|
||||
onActivated(add);
|
||||
onUnmounted(remove);
|
||||
onDeactivated(remove);
|
||||
}
|
@ -1,55 +0,0 @@
|
||||
import { useTouch } from './use-touch';
|
||||
import { getScroller } from '../utils/dom/scroll';
|
||||
import { on, off, preventDefault } from '../utils/dom/event';
|
||||
|
||||
let count = 0;
|
||||
const CLASSNAME = 'van-overflow-hidden';
|
||||
|
||||
export function useLockScroll(element: HTMLElement) {
|
||||
const { start, move, deltaY, direction } = useTouch();
|
||||
|
||||
function onTouchMove(event: TouchEvent) {
|
||||
move(event);
|
||||
|
||||
if (direction.value !== 'vertical') {
|
||||
return;
|
||||
}
|
||||
|
||||
let prevent = false;
|
||||
const up = deltaY.value < 0;
|
||||
const scroller = getScroller(event.target as HTMLElement, element);
|
||||
const { scrollTop, scrollHeight, offsetHeight } = scroller as HTMLElement;
|
||||
|
||||
if (scrollTop === 0) {
|
||||
prevent = up && offsetHeight < scrollHeight;
|
||||
} else if (scrollTop + offsetHeight >= scrollHeight) {
|
||||
prevent = !up;
|
||||
}
|
||||
|
||||
if (prevent) {
|
||||
preventDefault(event, true);
|
||||
}
|
||||
}
|
||||
|
||||
function lock() {
|
||||
if (!count) {
|
||||
document.body.classList.add(CLASSNAME);
|
||||
}
|
||||
|
||||
count++;
|
||||
on(document, 'touchstart', start);
|
||||
on(document, 'touchmove', onTouchMove);
|
||||
}
|
||||
|
||||
lock();
|
||||
|
||||
return function unlock() {
|
||||
count--;
|
||||
off(document, 'touchstart', start);
|
||||
off(document, 'touchmove', onTouchMove);
|
||||
|
||||
if (!count) {
|
||||
document.body.classList.remove(CLASSNAME);
|
||||
}
|
||||
};
|
||||
}
|
@ -1,63 +0,0 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
const MIN_DISTANCE = 10;
|
||||
|
||||
function getDirection(x: number, y: number) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
|
||||
if (y > x && y > MIN_DISTANCE) {
|
||||
return 'vertical';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
export function useTouch() {
|
||||
const startX = ref(0);
|
||||
const startY = ref(0);
|
||||
const deltaX = ref(0);
|
||||
const deltaY = ref(0);
|
||||
const offsetX = ref(0);
|
||||
const offsetY = ref(0);
|
||||
const direction = ref('');
|
||||
|
||||
function reset() {
|
||||
direction.value = '';
|
||||
deltaX.value = 0;
|
||||
deltaY.value = 0;
|
||||
offsetX.value = 0;
|
||||
offsetY.value = 0;
|
||||
}
|
||||
|
||||
function start(event: TouchEvent) {
|
||||
reset();
|
||||
startX.value = event.touches[0].clientX;
|
||||
startY.value = event.touches[0].clientY;
|
||||
}
|
||||
|
||||
function move(event: TouchEvent) {
|
||||
const touch = event.touches[0];
|
||||
deltaX.value = touch.clientX - this.startX;
|
||||
deltaY.value = touch.clientY - this.startY;
|
||||
offsetX.value = Math.abs(this.deltaX);
|
||||
offsetY.value = Math.abs(this.deltaY);
|
||||
|
||||
if (!direction.value) {
|
||||
direction.value = getDirection(offsetX.value, offsetY.value);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
move,
|
||||
start,
|
||||
startX,
|
||||
startY,
|
||||
deltaX,
|
||||
deltaY,
|
||||
offsetX,
|
||||
offsetY,
|
||||
direction
|
||||
};
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user