diff --git a/src/composition/use-touch.ts b/src/composition/use-touch.ts index ee44276f1..a4a65a2df 100644 --- a/src/composition/use-touch.ts +++ b/src/composition/use-touch.ts @@ -23,6 +23,9 @@ export function useTouch() { const offsetY = ref(0); const direction = ref(''); + const isVertical = () => direction.value === 'vertical'; + const isHorizontal = () => direction.value === 'horizontal'; + const reset = () => { deltaX.value = 0; deltaY.value = 0; @@ -60,5 +63,7 @@ export function useTouch() { offsetX, offsetY, direction, + isVertical, + isHorizontal, }; } diff --git a/src/index-bar/index.js b/src/index-bar/index.js index 226ae6f77..320f522ae 100644 --- a/src/index-bar/index.js +++ b/src/index-bar/index.js @@ -210,7 +210,7 @@ export default createComponent({ const onTouchMove = (event) => { touch.move(event); - if (touch.direction.value === 'vertical') { + if (touch.isVertical()) { preventDefault(event); const { clientX, clientY } = event.touches[0]; diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js index 9f2b7b709..483161243 100644 --- a/src/number-keyboard/Key.js +++ b/src/number-keyboard/Key.js @@ -29,7 +29,8 @@ export default createComponent({ const onTouchMove = (event) => { touch.move(event); - if (touch.direction) { + + if (touch.direction.value) { active.value = false; } }; diff --git a/src/overlay/index.js b/src/overlay/index.js index a19a58418..3b08d6c93 100644 --- a/src/overlay/index.js +++ b/src/overlay/index.js @@ -5,10 +5,6 @@ import { useLazyRender } from '../composition/use-lazy-render'; const [createComponent, bem] = createNamespace('overlay'); -function preventTouchMove(event) { - preventDefault(event, true); -} - export default createComponent({ props: { show: Boolean, @@ -25,6 +21,10 @@ export default createComponent({ setup(props, { slots }) { const lazyRender = useLazyRender(() => props.show); + const preventTouchMove = (event) => { + preventDefault(event, true); + }; + const renderOverlay = lazyRender(() => { const style = { zIndex: props.zIndex, diff --git a/src/pull-refresh/index.js b/src/pull-refresh/index.js index 83a907d62..ad8df4213 100644 --- a/src/pull-refresh/index.js +++ b/src/pull-refresh/index.js @@ -57,7 +57,6 @@ export default createComponent({ }); const touch = useTouch(); - const { deltaY, direction } = touch; const getHeadStyle = () => { if (props.headHeight !== DEFAULT_HEAD_HEIGHT) { @@ -150,9 +149,10 @@ export default createComponent({ checkPosition(event); } + const { deltaY } = touch; touch.move(event); - if (reachTop && deltaY.value >= 0 && direction.value === 'vertical') { + if (reachTop && deltaY.value >= 0 && touch.isVertical()) { preventDefault(event); setStatus(ease(deltaY.value)); } @@ -160,7 +160,7 @@ export default createComponent({ }; const onTouchEnd = () => { - if (reachTop && deltaY.value && isTouchable()) { + if (reachTop && touch.deltaY.value && isTouchable()) { state.duration = props.animationDuration; if (state.status === 'loosing') { diff --git a/src/rate/index.js b/src/rate/index.js index d092126f3..b4e0f94ff 100644 --- a/src/rate/index.js +++ b/src/rate/index.js @@ -121,7 +121,7 @@ export default createComponent({ touch.move(event); - if (touch.direction.value === 'horizontal') { + if (touch.isHorizontal()) { const { clientX } = event.touches[0]; preventDefault(event); select(getScoreByPosition(clientX)); diff --git a/src/swipe-cell/index.js b/src/swipe-cell/index.js index d342b7a54..f4c9c62da 100644 --- a/src/swipe-cell/index.js +++ b/src/swipe-cell/index.js @@ -44,7 +44,6 @@ export default createComponent({ }); const touch = useTouch(); - const { deltaX, direction } = touch; const getWidthByRef = (ref) => (ref.value ? useRect(ref).width : 0); @@ -107,9 +106,10 @@ export default createComponent({ return; } + const { deltaX } = touch; touch.move(event); - if (direction.value === 'horizontal') { + if (touch.isHorizontal()) { lockClick = true; state.dragging = true;