refactor: handling click event conflicts

2024-04-25 02:12:55 +08:00 · 2024-04-25 02:12:55 +08:00 · b18664a3a6
commit b18664a3a6
parent 6107b19d03
14 changed files with 63 additions and 73 deletions
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/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) => {
-          _stopPropagation(e)
-          this.hide(false)
-        })
+        setTimeout(() => {
+          mask.on('click', (e) => {
+            _stopPropagation(e)
+            this.hide(false)
+          })
+        }, 200)
        page.appendChild(mask.els[0])
      } else {
        page.style.position = this.pagePosition || 'fixed'
--- a/src/components/slide/BaseVideo.vue
+++ b/src/components/slide/BaseVideo.vue
--- a/src/components/slide/ItemToolbar.vue
+++ b/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>
--- a/src/components/slide/SlideHorizontal.vue
+++ b/src/components/slide/SlideHorizontal.vue
@ -131,9 +131,9 @@ function touchEnd(e) {
    <div
      class="slide-list"
      ref="slideListEl"
-      @pointerdown="touchStart"
-      @pointermove="touchMove"
-      @pointerup="touchEnd"
+      @pointerdown.prevent="touchStart"
+      @pointermove.prevent="touchMove"
+      @pointerup.prevent="touchEnd"
    >
      <slot></slot>
    </div>
--- a/src/components/slide/SlideVertical.vue
+++ b/src/components/slide/SlideVertical.vue
@ -92,9 +92,9 @@ function touchEnd(e) {
    <div
      class="slide-list flex-direction-column"
      ref="slideListEl"
-      @pointerdown="touchStart"
-      @pointermove="touchMove"
-      @pointerup="touchEnd"
+      @pointerdown.prevent="touchStart"
+      @pointermove.prevent="touchMove"
+      @pointerup.prevent="touchEnd"
    >
      <slot></slot>
    </div>
--- a/src/components/slide/SlideVerticalInfinite.vue
+++ b/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}']`)
-        if (!res) {
-          slideListEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
-        }
-        if (state.localIndex > half) {
+
+        // console.log('props.list.length', props.list.length, state.localIndex)
+        if (state.localIndex > half && state.localIndex < props.list.length - half) {
+          let addItemIndex = state.localIndex + half
+          let res = slideListEl.value.querySelector(
+            `.${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 (addIndex >= 0) {
-          let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${addIndex}']`)
-          if (!res) {
-            slideListEl.value.prepend(getInsEl(props.list[addIndex], addIndex))
+        if (state.localIndex >= half && state.localIndex < props.list.length - (half + 1)) {
+          let addIndex = state.localIndex - half
+          if (addIndex >= 0) {
+            let res = slideListEl.value.querySelector(`.${itemClassName}[data-index='${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"
-      @pointermove="touchMove"
-      @pointerup="touchEnd"
+      @pointerdown.prevent="touchStart"
+      @pointermove.prevent="touchMove"
+      @pointerup.prevent="touchEnd"
    >
      <slot></slot>
    </div>
--- a/src/main.ts
+++ b/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)
--- a/src/mock/index.ts
+++ b/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)
-    console.log('allRecommendVideos', cloneDeep(allRecommendVideos.length), page)
+    const { start, pageSize } = config.params
+    // 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: ''
--- a/src/pages/home/slide/SlideList.vue
+++ b/src/pages/home/slide/SlideList.vue
@ -69,25 +69,25 @@ const state = reactive({
  index: props.index,
  list: props.list,
  totalSize: 0,
-  pageSize: 10,
-  pageNo: 0
+  pageSize: 10
 })

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

--- a/src/utils/bus.ts
+++ b/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))
--- a/src/utils/hooks/useSlideListItemRender.jsx
+++ b/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}
--- a/src/utils/index.tsx
+++ b/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
--- a/src/utils/mixin.ts
+++ b/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
--- a/src/utils/slide.ts
+++ b/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