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