refactor: handling click event conflicts

src/components/dialog/FromBottomDialog.vue

@@ -84,10 +84,12 @@ export default {
 
         let maskTemplate = `<div class="Mask fade-in ${this.maskMode}"></div>`
         let mask = new Dom().create(maskTemplate)
-        mask.on('click', (e) => {
+        setTimeout(() => {
-          _stopPropagation(e)
+          mask.on('click', (e) => {
-          this.hide(false)
+            _stopPropagation(e)
-        })
+            this.hide(false)
+          })
+        }, 200)
         page.appendChild(mask.els[0])
       } else {
         page.style.position = this.pagePosition || 'fixed'

src/components/slide/ItemToolbar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import BaseMusic from '../BaseMusic'
-import { _formatNumber, _updateItem } from '@/utils'
+import { _dateFormat, _formatNumber, _updateItem } from '@/utils'
 import bus, { EVENT_KEY } from '@/utils/bus'
 import { Icon } from '@iconify/vue'
 
@@ -38,9 +38,14 @@ function attention(e) {
 }
 
 function showComments() {
+  console.log('showComments', _dateFormat(Date.now()))
   // emit('showComments')
   bus.emit(EVENT_KEY.OPEN_COMMENTS, props.item.id)
 }
+
+function s() {
+  console.log('ss', _dateFormat(Date.now()))
+}
 </script>
 
 <template>
@@ -50,45 +55,45 @@ function showComments() {
         class="avatar"
         :src="props.item.author.avatar_168x168.url_list[0]"
         alt=""
-        @click.stop="bus.emit(EVENT_KEY.GO_USERINFO)"
+        @pointerup="bus.emit(EVENT_KEY.GO_USERINFO)"
       />
       <transition name="fade">
-        <div v-if="!props.item.isAttention" @click.stop="attention" class="options">
+        <div v-if="!props.item.isAttention" @pointerup="attention" class="options">
           <img class="no" src="../../assets/img/icon/add-light.png" alt="" />
           <img class="yes" src="../../assets/img/icon/ok-red.png" alt="" />
         </div>
       </transition>
     </div>
-    <div class="love mb2r" @click.stop="loved($event)">
+    <div class="love mb2r" @pointerup="loved($event)">
       <div>
         <img src="../../assets/img/icon/love.svg" class="love-image" v-if="!props.item.isLoved" />
         <img src="../../assets/img/icon/loved.svg" class="love-image" v-if="props.item.isLoved" />
       </div>
       <span>{{ _formatNumber(props.item.statistics.digg_count) }}</span>
     </div>
-    <div class="message mb2r" @click.stop="showComments">
+    <div class="message mb2r" @pointerup="showComments">
       <Icon icon="mage:message-dots-round-fill" class="icon" style="color: white" />
       <span>{{ _formatNumber(props.item.statistics.comment_count) }}</span>
     </div>
     <!--TODO     -->
     <div
       class="message mb2r"
-      @click.stop="_updateItem(props, 'isCollect', !props.item.isCollect, emit)"
+      @pointerup="_updateItem(props, 'isCollect', !props.item.isCollect, emit)"
     >
       <Icon v-if="props.item.isCollect" icon="ic:round-star" class="icon" style="color: yellow" />
       <Icon v-else icon="ic:round-star" class="icon" style="color: white" />
       <span>{{ _formatNumber(props.item.statistics.comment_count) }}</span>
     </div>
-    <div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
+    <div v-if="!props.isMy" class="share mb2r" @pointerup="bus.emit(EVENT_KEY.SHOW_SHARE)">
       <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image" />
       <span>{{ _formatNumber(props.item.statistics.share_count) }}</span>
     </div>
-    <div v-else class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
+    <div v-else class="share mb2r" @pointerup="bus.emit(EVENT_KEY.SHOW_SHARE)">
       <img src="../../assets/img/icon/menu-white.png" alt="" class="share-image" />
     </div>
     <!--    <BaseMusic-->
     <!--        :cover="props.item.music.cover"-->
-    <!--        @click.stop="$nav('/home/music')"-->
+    <!--        @pointerup="$nav('/home/music')"-->
     <!--    /> -->
     <BaseMusic :item="props.item" />
   </div>

src/components/slide/SlideHorizontal.vue

@@ -131,9 +131,9 @@ function touchEnd(e) {
     <div
       class="slide-list"
       ref="slideListEl"
-      @pointerdown="touchStart"
+      @pointerdown.prevent="touchStart"
-      @pointermove="touchMove"
+      @pointermove.prevent="touchMove"
-      @pointerup="touchEnd"
+      @pointerup.prevent="touchEnd"
     >
       <slot></slot>
     </div>

src/components/slide/SlideVertical.vue

@@ -92,9 +92,9 @@ function touchEnd(e) {
     <div
       class="slide-list flex-direction-column"
       ref="slideListEl"
-      @pointerdown="touchStart"
+      @pointerdown.prevent="touchStart"
-      @pointermove="touchMove"
+      @pointermove.prevent="touchMove"
-      @pointerup="touchEnd"
+      @pointerup.prevent="touchEnd"
     >
       <slot></slot>
     </div>

src/components/slide/SlideVerticalInfinite.vue

@@ -276,12 +276,17 @@ function touchEnd(e) {
         if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {
           emit('loadMore')
         }
-        let addItemIndex = state.localIndex + half
+
-        let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addItemIndex}']`)
+        // console.log('props.list.length', props.list.length, state.localIndex)
-        if (!res) {
+        if (state.localIndex > half && state.localIndex < props.list.length - half) {
-          slideListEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
+          let addItemIndex = state.localIndex + half
-        }
+          let res = slideListEl.value.querySelector(
-        if (state.localIndex > half) {
+            `.${itemClassName}[data-index='${addItemIndex}']`
+          )
+          if (!res) {
+            slideListEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
+          }
+
           let index = slideListEl.value
             .querySelector(`.${itemClassName}:first-child`)
             .getAttribute('data-index')
@@ -292,15 +297,14 @@ function touchEnd(e) {
           })
         }
       } else {
-        let addIndex = state.localIndex - half
+        if (state.localIndex >= half && state.localIndex < props.list.length - (half + 1)) {
-        if (addIndex >= 0) {
+          let addIndex = state.localIndex - half
-          let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addIndex}']`)
+          if (addIndex >= 0) {
-          if (!res) {
+            let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addIndex}']`)
-            slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))
+            if (!res) {
+              slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))
+            }
           }
-        }
-
-        if (state.localIndex >= half) {
           let index = slideListEl.value
             .querySelector(`.${itemClassName}:last-child`)
             .getAttribute('data-index')
@@ -310,27 +314,6 @@ function touchEnd(e) {
             _css(item, 'top', (state.localIndex - half) * state.wrapper.height)
           })
         }
-
-        // if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
-        //   if (!res) {
-        //     slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))
-        //     let index = slideListEl.value
-        //       .querySelector(`.${itemClassName}:last-child`)
-        //       .getAttribute('data-index')
-        //     appInsMap.get(Number(index)).unmount()
-        //     // $(slideListEl.value).find(".base-slide-item:last").remove()
-        //     slideListEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {
-        //       _css(item, 'top', (state.localIndex - 2) * state.wrapper.height)
-        //     })
-        //   }
-        // }
-        //
-        // if (state.wrapper.childrenLength > props.virtualTotal) {
-        //   let index = slideListEl.value
-        //     .querySelector(`.${itemClassName}:last-child`)
-        //     .getAttribute('data-index')
-        //   appInsMap.get(Number(index)).unmount()
-        // }
       }
       state.wrapper.childrenLength = slideListEl.value.children.length
     }
@@ -353,9 +336,9 @@ function canNext(state, isNext) {
       class="slide-list flex-direction-column"
       ref="slideListEl"
       @click="null"
-      @pointerdown="touchStart"
+      @pointerdown.prevent="touchStart"
-      @pointermove="touchMove"
+      @pointermove.prevent="touchMove"
-      @pointerup="touchEnd"
+      @pointerup.prevent="touchEnd"
     >
       <slot></slot>
     </div>

src/main.ts

@@ -17,7 +17,7 @@ HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEven
     if (listener instanceof Function && eventName === 'click') {
       args[1] = new Proxy(listener, {
         apply(target, ctx, args) {
-          // console.log('点击', window.isMoved)
+          console.log('点击', window.isMoved)
           if (window.isMoved) return
           try {
             return target.apply(ctx, args)

src/mock/index.ts

@@ -134,14 +134,14 @@ async function fetchData() {
 //TODO 有个bug，一开始只返回了6条数据，但第二次前端传过来的pageNo是2了，就是会从第10条数据开始返回，导致中间漏了4条
 export async function startMock() {
   mock.onGet(/video\/recommended/).reply(async (config) => {
-    const page = getPage2(config.params)
+    const { start, pageSize } = config.params
-    console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), page)
+    // console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), config.params)
     return [
       200,
       {
         data: {
           total: 844,
-          list: allRecommendVideos.slice(page.offset, page.limit) // list: allRecommendVideos.slice(0, 6),
+          list: allRecommendVideos.slice(start, start + pageSize) // list: allRecommendVideos.slice(0, 6),
         },
         code: 200,
         msg: ''

src/pages/home/slide/SlideList.vue

@@ -69,25 +69,25 @@ const state = reactive({
   index: props.index,
   list: props.list,
   totalSize: 0,
-  pageSize: 10,
+  pageSize: 10
-  pageNo: 0
 })
 
 function loadMore() {
+  console.log('load')
   if (!baseStore.loading) {
-    state.pageNo++
     getData()
   }
 }
 
 async function getData(refresh = false) {
+  if (!refresh && state.totalSize === state.list.length) return
   if (baseStore.loading) return
   baseStore.loading = true
   let res = await props.api({
-    pageNo: refresh ? 0 : state.pageNo,
+    start: refresh ? 0 : state.list.length,
     pageSize: state.pageSize
   })
-  // console.log('getSlide4Data-', 'refresh', refresh, res)
+  // console.log('getSlide4Data-', refresh, res, state.totalSize, state.list.length)
   baseStore.loading = false
   if (res.success) {
     state.totalSize = res.data.total
@@ -95,8 +95,6 @@ async function getData(refresh = false) {
       state.list = []
     }
     state.list = state.list.concat(res.data.list)
-  } else {
-    state.pageNo--
   }
 }
 

src/utils/bus.ts

@@ -34,6 +34,7 @@ export default {
     this.eventMap = new Map()
   },
   emit(eventType, val?) {
+    console.log('emit', eventType, val)
     const cbs = this.eventMap.get(eventType)
     if (cbs) {
       cbs.map((cb) => cb(val))

src/utils/hooks/useSlideListItemRender.jsx

@@ -1,5 +1,5 @@
 import SlideUser from '@/components/slide/SlideUser.vue'
-import BVideo from '@/components/slide/BVideo.vue'
+import BaseVideo from '@/components/slide/BaseVideo.vue'
 
 export function useSlideListItemRender(props) {
   return function render(item, index, play, uniqueId) {
@@ -20,7 +20,7 @@ export function useSlideListItemRender(props) {
         break
       default:
         node = (
-          <BVideo
+          <BaseVideo
             isPlay={play}
             item={item}
             index={index}

src/utils/index.tsx

@@ -62,7 +62,7 @@ export function _formatNumber(num) {
   }
 }
 
-export function _dateFormat(val, type): string {
+export function _dateFormat(val, type?): string {
   if (!val) return
   if (String(val).length === 10) {
     val = val * 1000

src/utils/mixin.ts

@@ -104,7 +104,7 @@ export default {
       }
     },
     love: {
-      beforeMount: function (el, binding) {
+      beforeMount: function (el: HTMLDivElement, binding) {
         let isDbClick = false
         let clickTimer = null
         let dbClickTimer = null

src/utils/slide.ts

@@ -183,7 +183,8 @@ export function slideTouchEnd(e, state, canNextCb = null, nextCb = null, notNext
     if (!canNextCb) canNextCb = canNext
     if (canNextCb(state, isNext)) {
       //能滑动，那就把事件捕获，不能给父组件处理
-      // Utils.$stopPropagation(e)
+      // _stopPropagation(e)
+
       //结合时间、距离来判断是否成功滑动
       const endTime = Date.now()
       let gapTime = endTime - state.start.time