chore(touch): add isVertical/isHorizontal

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,
   };
 }

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];

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;
       }
     };

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,

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') {

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));

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;