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

refactor(use-touch): move isTap logic to use-touch (#12003)

Browse Source 
* refactor(use-touch): move onlyTap logic to use-touch

* chore: rename onlyTap to isTap
This commit is contained in:
inottn 2023-06-21 10:17:33 +08:00 committed by GitHub
parent 5e25e46fdb
commit 1545c07a71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/vant/src/composables/use-touch.ts
View File

@ -1,4 +1,5 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { TAP_OFFSET } from '../utils';
type Direction = '' | 'vertical' | 'horizontal'; type Direction = '' | 'vertical' | 'horizontal';
@ -20,6 +21,7 @@ export function useTouch() {
const offsetX = ref(0); const offsetX = ref(0);
const offsetY = ref(0); const offsetY = ref(0);
const direction = ref<Direction>(''); const direction = ref<Direction>('');
const isTap = ref(true);
const isVertical = () => direction.value === 'vertical'; const isVertical = () => direction.value === 'vertical';
const isHorizontal = () => direction.value === 'horizontal'; const isHorizontal = () => direction.value === 'horizontal';
@ -30,6 +32,7 @@ export function useTouch() {
offsetX.value = 0; offsetX.value = 0;
offsetY.value = 0; offsetY.value = 0;
direction.value = ''; direction.value = '';
isTap.value = true;
}; };
const start = ((event: TouchEvent) => { const start = ((event: TouchEvent) => {
@ -55,6 +58,13 @@ export function useTouch() {
) { ) {
direction.value = getDirection(offsetX.value, offsetY.value); direction.value = getDirection(offsetX.value, offsetY.value);
} }
if (
isTap.value &&
(offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)
) {
isTap.value = false;
}
}) as EventListener; }) as EventListener;
return { return {
@ -70,5 +80,6 @@ export function useTouch() {
direction, direction,
isVertical, isVertical,
isHorizontal, isHorizontal,
isTap,
}; };
} }

20
packages/vant/src/rate/Rate.tsx
View File

@ -10,7 +10,6 @@ import {
makeNumberProp, makeNumberProp,
makeNumericProp, makeNumericProp,
createNamespace, createNamespace,
TAP_OFFSET,
} from '../utils'; } from '../utils';
// Composables // Composables
@ -114,7 +113,6 @@ export default defineComponent({
let groupRefRect: DOMRect; let groupRefRect: DOMRect;
let minRectTop = Number.MAX_SAFE_INTEGER; let minRectTop = Number.MAX_SAFE_INTEGER;
let maxRectTop = Number.MIN_SAFE_INTEGER; let maxRectTop = Number.MIN_SAFE_INTEGER;
let onlyTap = false;
const updateRanges = () => { const updateRanges = () => {
groupRefRect = useRect(groupRef); groupRefRect = useRect(groupRef);
@ -185,7 +183,6 @@ export default defineComponent({
} }
touch.start(event); touch.start(event);
onlyTap = true;
updateRanges(); updateRanges();
}; };
@ -196,18 +193,11 @@ export default defineComponent({
touch.move(event); touch.move(event);
if (touch.isHorizontal()) { if (touch.isHorizontal() && !touch.isTap.value) {
const { clientX, clientY } = event.touches[0]; const { clientX, clientY } = event.touches[0];
preventDefault(event); preventDefault(event);
select(getScoreByPosition(clientX, clientY)); select(getScoreByPosition(clientX, clientY));
} }
if (
onlyTap &&
(touch.offsetX.value > TAP_OFFSET || touch.offsetY.value > TAP_OFFSET)
) {
onlyTap = false;
}
}; };
const renderStar = (item: RateListItem, index: number) => { const renderStar = (item: RateListItem, index: number) => {
@ -241,7 +231,13 @@ export default defineComponent({
let value = allowHalf let value = allowHalf
? getScoreByPosition(event.clientX, event.clientY) ? getScoreByPosition(event.clientX, event.clientY)
: score; : score;
if (props.clearable && onlyTap && value === props.modelValue) value = 0; if (
props.clearable &&
touch.isTap.value &&
value === props.modelValue
) {
value = 0;
}
select(value); select(value);
}; };