refactor: use pointer event replace touch event

src/App.vue

@@ -6,16 +6,16 @@
       </keep-alive>
     </transition>
   </router-view>
-  <BaseMask v-if="!isMobile" />
+  <!--  <BaseMask v-if="!isMobile" />-->
-  <div v-if="!isMobile" class="guide">
+  <!--  <div v-if="!isMobile" class="guide">-->
-    <Icon icon="mynaui:danger-triangle" />
+  <!--    <Icon icon="mynaui:danger-triangle" />-->
-    <div class="txt">
+  <!--    <div class="txt">-->
-      <h2>切换至手机模式才可正常使用</h2>
+  <!--      <h2>切换至手机模式才可正常使用</h2>-->
-      <h3>1. 按 F12 调出控制台</h3>
+  <!--      <h3>1. 按 F12 调出控制台</h3>-->
-      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
+  <!--      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>-->
-    </div>
+  <!--    </div>-->
-    <img src="@/assets/img/guide.png" alt="" />
+  <!--    <img src="@/assets/img/guide.png" alt="" />-->
-  </div>
+  <!--  </div>-->
   <Call />
 </template>
 <script setup lang="ts">

src/assets/less/custom.less

@@ -117,6 +117,7 @@ p {
 }
 
 .slide {
+  touch-action: none;
   height: 100%;
   width: 100%;
   transition: height 0.3s;

src/components/slide/SlideHorizontal.vue

@@ -40,7 +40,8 @@ const state = reactive({
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 }
+  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  isDown: false
 })
 
 watch(
@@ -73,11 +74,11 @@ onUnmounted(() => {
   ob.disconnect()
 })
 
-function touchStart(e: TouchEvent) {
+function touchStart(e: PointerEvent) {
   slideTouchStart(e, wrapperEl.value, state)
 }
 
-function touchMove(e: TouchEvent) {
+function touchMove(e: PointerEvent) {
   slideTouchMove(
     e,
     wrapperEl.value,
@@ -91,7 +92,7 @@ function touchMove(e: TouchEvent) {
   )
 }
 
-function touchEnd(e: TouchEvent) {
+function touchEnd(e: PointerEvent) {
   slideTouchEnd(e, state, canNext, () => {})
   slideReset(wrapperEl.value, state, SlideType.HORIZONTAL, emit)
 }
@@ -109,9 +110,9 @@ function canNext(isNext: boolean) {
     <div
       class="slide-list"
       ref="wrapperEl"
-      @touchstart="touchStart"
+      @pointerdown="touchStart"
-      @touchmove="touchMove"
+      @pointermove="touchMove"
-      @touchend="touchEnd"
+      @pointerup="touchEnd"
     >
       <slot></slot>
     </div>

src/components/slide/SlideVerticalInfinite.vue

@@ -68,7 +68,8 @@ const state = reactive({
   next: false,
   start: { x: 0, y: 0, time: 0 },
   move: { x: 0, y: 0 },
-  wrapper: { width: 0, height: 0, childrenLength: 0 }
+  wrapper: { width: 0, height: 0, childrenLength: 0 },
+  isDown: false
 })
 const baseStore = useBaseStore()
 
@@ -342,9 +343,9 @@ function canNext(isNext) {
       class="slide-list flex-direction-column"
       ref="wrapperEl"
       @click="null"
-      @touchstart="touchStart"
+      @pointerdown="touchStart"
-      @touchmove="touchMove"
+      @pointermove="touchMove"
-      @touchend="touchEnd"
+      @pointerup="touchEnd"
     >
       <slot></slot>
     </div>

src/components/slide/common.js

@@ -21,8 +21,9 @@ export function slideInit(el, state, type) {
 
 export function slideTouchStart(e, el, state) {
   Utils.$setCss(el, 'transition-duration', `0ms`)
-  state.start.x = e.touches[0].pageX
+  state.isDown = true
-  state.start.y = e.touches[0].pageY
+  state.start.x = e.pageX
+  state.start.y = e.pageY
   state.start.time = Date.now()
 }
 
@@ -55,8 +56,11 @@ export function slideTouchMove(
   notNextCb,
   slideOtherDirectionCb = null
 ) {
-  state.move.x = e.touches[0].pageX - state.start.x
+  if (!state.isDown) {
-  state.move.y = e.touches[0].pageY - state.start.y
+    return
+  }
+  state.move.x = e.pageX - state.start.x
+  state.move.y = e.pageY - state.start.y
 
   let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
 
@@ -99,6 +103,8 @@ export function slideTouchEnd(
   doNotNextCb,
   type = SlideType.HORIZONTAL
 ) {
+  state.isDown = false
+
   let isHorizontal = type === SlideType.HORIZONTAL
   let isNext = isHorizontal ? state.move.x < 0 : state.move.y < 0