refactor: remove jquery

docs/NOTE.md

@@ -9,3 +9,4 @@
 
 - 双指缩放
 - AutoInput组件，在真机上无法输入
+- 真机上100vh显示异常的问题

env.d.ts

@@ -3,6 +3,10 @@
 declare const LATEST_COMMIT_HASH: string
 
 declare global {
+  interface Window {
+    isMoved: boolean
+  }
+
   interface Navigator {
     control: any
     webkitGetUserMedia: any

public/data/posts.json

@@ -137,6 +137,9 @@
       },
       "interact_info": { "liked_count": "2147", "liked": false },
       "cover": { "url_default": "daZ662BX0lVMTq0Y6hIwR.png" },
+      "image_list": [
+        { "info_list": [{ "url": "daZ662BX0lVMTq0Y6hIwR.png" }] }
+      ],
       "type": "normal",
       "display_title": "无所谓了，互联网没有我在乎的人"
     },
@@ -176,7 +179,10 @@
         "nickname": "芙•"
       },
       "interact_info": { "liked": false, "liked_count": "1966" },
-      "cover": { "url_default": "4a4TtExpq7RXnKK3hylKU.png" }
+      "cover": { "url_default": "4a4TtExpq7RXnKK3hylKU.png" },
+      "image_list": [
+        { "info_list": [{ "url": "4a4TtExpq7RXnKK3hylKU.png" }] }
+      ]
     },
     "track_id": "2d0udv0xvhqne0t0nmd83",
     "ignore": false,
@@ -233,6 +239,9 @@
       },
       "interact_info": { "liked": false, "liked_count": "1005" },
       "cover": { "url_default": "dg16eh25m2SSI9Hc1fJuE.png" },
+      "image_list": [
+        { "info_list": [{ "url": "dg16eh25m2SSI9Hc1fJuE.png" }] }
+      ],
       "type": "normal",
       "display_title": "拍旗袍没人看 办公室随手拍就有流量是吧"
     },
@@ -321,7 +330,10 @@
         "nick_name": "林木婷子"
       },
       "interact_info": { "liked": false, "liked_count": "2700" },
-      "cover": { "url_default": "z-XSh-g9MhKpYrFDHcxQT.png" }
+      "cover": { "url_default": "z-XSh-g9MhKpYrFDHcxQT.png" },
+      "image_list": [
+        { "info_list": [{ "url": "z-XSh-g9MhKpYrFDHcxQT.png" }] }
+      ]
     },
     "track_id": "2d0udv0xvhqne0t0nmd83"
   },
@@ -629,7 +641,10 @@
         "user_id": "5bf37f6651783a194c1e1da2"
       },
       "interact_info": { "liked": false, "liked_count": "119" },
-      "cover": { "url_default": "UaxqkI4aZ5LDu7k8KLw48.png" }
+      "cover": { "url_default": "UaxqkI4aZ5LDu7k8KLw48.png" },
+      "image_list": [
+        { "info_list": [{ "url": "UaxqkI4aZ5LDu7k8KLw48.png" }] }
+      ]
     }
   },
   {
@@ -888,6 +903,7 @@
       },
       "interact_info": { "liked": false, "liked_count": "1786" },
       "cover": { "url_default": "n0SAcEY5gLucU7Ik7yP2P.png" },
+      "image_list": [{ "info_list": [{ "url": "n0SAcEY5gLucU7Ik7yP2P.png" }] }],
       "type": "normal"
     },
     "track_id": "2d0udv0xvhqne0t0nmd83",
@@ -936,6 +952,9 @@
     "model_type": "note",
     "note_card": {
       "cover": { "url_default": "Sf5mzf68e2GwZHZv7h1G2.png" },
+      "image_list": [
+        { "info_list": [{ "url": "Sf5mzf68e2GwZHZv7h1G2.png" }] }
+      ],
       "type": "normal",
       "display_title": "行吧，我重发 ",
       "user": {

src/components/dialog/FromBottomDialog.vue

@@ -28,8 +28,9 @@
   </transition>
 </template>
 <script>
-import Dom from '../../utils/dom'
+import Dom, { _css } from '../../utils/dom'
 import bus, { EVENT_KEY } from '@/utils/bus'
+import Utils from '@/utils'
 
 export default {
   name: 'FromBottomDialog',
@@ -74,7 +75,7 @@ export default {
     modelValue(newVal) {
       let page = document.getElementById(this.pageId)
       if (newVal) {
-        this.pagePosition = this.$getCss2(page, 'position')
+        this.pagePosition = _css(page, 'position')
         page.style.position = 'absolute'
         this.scroll = document.documentElement.scrollTop
         document.body.style.position = 'fixed'
@@ -113,28 +114,28 @@ export default {
   created() {},
   methods: {
     beforeEnter(el) {
-      this.$setCss(el, 'transition-duration', `250ms`)
+      _css(el, 'transition-duration', `250ms`)
-      this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
+      _css(el, 'transform', `translate3d(0,${this.height},0)`)
     },
     enter(el, done) {
       setTimeout(() => {
-        this.$setCss(el, 'transform', `translate3d(0,0,0)`)
+        _css(el, 'transform', `translate3d(0,0,0)`)
       }, 0)
       setTimeout(() => {
-        // this.$setCss(el, 'transition-duration', `0ms`)
+        // _css(el, 'transition-duration', `0ms`)
-        this.$setCss(el, 'transform', `none`)
+        _css(el, 'transform', `none`)
         done()
       }, 250)
     },
     afterEnter() {},
     beforeLeave(el) {
-      this.$setCss(el, 'transition-duration', `250ms`)
+      _css(el, 'transition-duration', `250ms`)
-      this.$setCss(el, 'transform', `translate3d(0,0,0)`)
+      _css(el, 'transform', `translate3d(0,0,0)`)
     },
     leave(el, done) {
       //ref获取不到
       let maxHeight = new Dom('.FromBottomDialog').css('max-height')
-      this.$setCss(el, 'transform', `translate3d(0,${maxHeight},0)`)
+      _css(el, 'transform', `translate3d(0,${maxHeight},0)`)
       setTimeout(done, 250)
     },
     afterLeave() {},
@@ -147,7 +148,7 @@ export default {
       if (this.$refs.dialog.scrollTop !== 0) return
       this.startLocationY = e.touches[0].pageY
       this.startTime = Date.now()
-      this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
+      _css(this.$refs.dialog, 'transition-duration', `0ms`)
     },
     move(e) {
       if (this.$refs.dialog.scrollTop !== 0) return
@@ -157,7 +158,7 @@ export default {
           tag: this.tag,
           e: this.moveYDistance
         })
-        this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
+        _css(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
       }
     },
     end() {
@@ -168,17 +169,17 @@ export default {
       //滑动
       if (this.$refs.dialog.scrollTop !== 0) return
       let clientHeight = this.$refs.dialog.clientHeight
-      this.$setCss(this.$refs.dialog, 'transition-duration', `250ms`)
+      _css(this.$refs.dialog, 'transition-duration', `250ms`)
       if (Math.abs(this.moveYDistance) > clientHeight / 2) {
-        this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${clientHeight}px,0)`)
+        _css(this.$refs.dialog, 'transform', `translate3d(0,${clientHeight}px,0)`)
         bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: true })
         setTimeout(this.hide, 250)
       } else {
-        this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
+        _css(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
         bus.emit(EVENT_KEY.DIALOG_END, { tag: this.tag, isClose: false })
         setTimeout(() => {
-          this.$setCss(this.$refs.dialog, 'transform', 'none')
+          _css(this.$refs.dialog, 'transform', 'none')
-          // this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
+          // _css(this.$refs.dialog, 'transition-duration', `0ms`)
         }, 250)
       }
       this.moveYDistance = 0

src/components/slide/SlideAlbum.vue

@@ -110,11 +110,8 @@ import {
   slideTouchStart
 } from '@/utils/slide'
 import { SlideAlbumOperationStatus, SlideItemPlayStatus, SlideType } from '../../utils/const_var'
-import ItemToolbar from './ItemToolbar'
-import ItemDesc from './ItemDesc'
 import { cloneDeep } from '@/utils'
 import bus, { EVENT_KEY } from '../../utils/bus'
-import $ from 'jquery'
 
 let out = new Float32Array([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
 let ov = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1])
@@ -430,6 +427,9 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
+  const s = true
+  if (s) return
+
   // Utils.$showNoticeDialog('move'+e.touches.length)
   // console.log('move', e.touches.length, state.operationStatus)
   let current1 = { x: e.touches[0].pageX, y: e.touches[0].pageY }
@@ -481,10 +481,11 @@ function touchMove(e) {
     if (rectMap.has(state.localIndex)) {
       rect = rectMap.get(state.localIndex)
     } else {
+      //TODO 这里去掉jquery
       //getBoundingClientRect在手机上获取不到值
-      let offset = $(state.itemRefs[state.localIndex]).offset()
+      // let offset = $(state.itemRefs[state.localIndex]).offset()
-      rect = { x: offset.left, y: offset.top }
+      // rect = { x: offset.left, y: offset.top }
-      rectMap.set(state.localIndex, rect)
+      // rectMap.set(state.localIndex, rect)
     }
 
     let current2 = { x: e.touches[1].pageX, y: e.touches[1].pageY }

src/components/slide/SlideVerticalInfinite.vue

@@ -1,4 +1,4 @@
-<script setup lang="jsx">
+<script setup lang="tsx">
 import { createApp, onMounted, reactive, ref, render as vueRender, watch } from 'vue'
 import GM from '../../utils'
 import {
@@ -14,7 +14,7 @@ import SlideItem from '@/components/slide/SlideItem.vue'
 import bus, { EVENT_KEY } from '../../utils/bus'
 import Loading from '@/components/Loading.vue'
 import { useBaseStore } from '@/store/pinia'
-import $ from 'jquery'
+import { _css } from '@/utils/dom'
 
 const props = defineProps({
   index: {
@@ -60,10 +60,10 @@ const emit = defineEmits(['update:index', 'loadMore', 'refresh'])
 
 const appInsMap = new Map()
 const itemClassName = 'slide-item'
-const wrapperEl = ref(null)
+const wrapperEl = ref<HTMLDivElement>(null)
 const state = reactive({
   judgeValue: 20,
-  type: SlideType.VERTICAL,
+  type: SlideType.VERTICAL_INFINITE,
   name: props.name,
   localIndex: props.index,
   needCheck: true,
@@ -86,17 +86,17 @@ watch(
       if (oldVal.length === 0) {
         insertContent()
       } else {
-        let lastSlideItem = $(wrapperEl.value).find(`.${itemClassName}:last`)
+        let lastSlideItem = wrapperEl.value.querySelector(`.${itemClassName}:last-child`)
-        let top = lastSlideItem.css('top')
+        let top = _css(lastSlideItem, 'top')
-        let lastIndex = Number(lastSlideItem.attr('data-index')) + 1
+        let lastIndex = Number(lastSlideItem.getAttribute('data-index')) + 1
-        console.log('lastIndex', lastIndex)
+        // console.log('lastIndex', lastIndex)
         newVal.slice(lastIndex, lastIndex + 3).map((item, index) => {
           let el = getInsEl(item, lastIndex + index)
           //这里必须要设置个top值，不然会把前面的条目给覆盖掉
           //2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
           //因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还
           // 计算top值的，会和前面的对不上
-          $(el).css('top', top)
+          _css(el, 'top', top)
           wrapperEl.value.appendChild(el)
           state.wrapper.childrenLength++
         })
@@ -147,13 +147,13 @@ watch(
 )
 
 onMounted(() => {
-  slideInit(wrapperEl.value, state, SlideType.VERTICAL)
+  slideInit(wrapperEl.value, state)
   insertContent()
 })
 
 function insertContent(list = props.list) {
   if (!list.length) return
-  $(wrapperEl.value).empty()
+  wrapperEl.value.innerHTML = ''
   let half = (props.virtualTotal - 1) / 2
   let start = 0
   if (state.localIndex >= half) {
@@ -171,18 +171,21 @@ function insertContent(list = props.list) {
     let el = getInsEl(item, start + index, start + index === state.localIndex)
     wrapperEl.value.appendChild(el)
   })
-  GM.$setCss(wrapperEl.value, 'transform', `translate3d(0px,${getSlideOffset(state)}px,  0px)`)
+  GM.$setCss(
+    wrapperEl.value,
+    'transform',
+    `translate3d(0px,${getSlideOffset(state, wrapperEl.value)}px,  0px)`
+  )
 
   if (state.localIndex > 2 && list.length > 5) {
-    $(wrapperEl.value)
+    let list = wrapperEl.value.querySelectorAll(`.${itemClassName}`)
-      .find(`.${itemClassName}`)
+    list.forEach((item) => {
-      .each(function () {
+      if (list.length - state.localIndex > 2) {
-        if (list.length - state.localIndex > 2) {
+        _css(item, 'top', (state.localIndex - 2) * state.wrapper.height)
-          $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
+      } else {
-        } else {
+        _css(item, 'top', start * state.wrapper.height)
-          $(this).css('top', start * state.wrapper.height)
+      }
-        }
+    })
-      })
   }
   state.wrapper.childrenLength = wrapperEl.value.children.length
   // console.log('list[state.localIndex]',list[state.localIndex])
@@ -190,10 +193,10 @@ function insertContent(list = props.list) {
 }
 
 function dislike(item) {
-  let currentItem = $(wrapperEl.value).find(`.${itemClassName}[data-index=${state.localIndex}]`)
+  // let currentItem = $(wrapperEl.value).find(`.${itemClassName}[data-index=${state.localIndex}]`)
-  let replaceItem = getInsEl(item, state.localIndex, true)
+  // let replaceItem = getInsEl(item, state.localIndex, true)
-  $(replaceItem).css('top', currentItem.css('top'))
+  // $(replaceItem).css('top', currentItem.css('top'))
-  currentItem.replaceWith(replaceItem)
+  // currentItem.replaceWith(replaceItem)
 }
 
 defineExpose({ dislike })
@@ -252,9 +255,9 @@ function touchEnd(e) {
           emit('loadMore')
         }
         let addItemIndex = state.localIndex + 2
-        let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
+        let res = wrapperEl.value.querySelector(`.${itemClassName}[data-index='${addItemIndex}']`)
         if (state.wrapper.childrenLength < props.virtualTotal) {
-          if (res.length === 0) {
+          if (!res) {
             wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
           }
         }
@@ -263,49 +266,50 @@ function touchEnd(e) {
           state.localIndex >= (props.virtualTotal + 1) / 2 &&
           state.localIndex <= props.list.length - 3
         ) {
-          if (res.length === 0) {
+          if (!res) {
             wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
-            appInsMap
+            let index = wrapperEl.value
-              .get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index'))
+              .querySelector(`.${itemClassName}:first-child`)
-              .unmount()
+              .getAttribute('data-index')
-            // $(wrapperEl.value).find(".base-slide-item:first").remove()
+            appInsMap.get(Number(index)).unmount()
-            $(wrapperEl.value)
+            wrapperEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {
-              .find(`.${itemClassName}`)
+              _css(item, 'top', (state.localIndex - 2) * state.wrapper.height)
-              .each(function () {
+            })
-                $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
-              })
           }
         }
         if (state.wrapper.childrenLength > props.virtualTotal) {
-          $(wrapperEl.value)
+          wrapperEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {
-            .find(`.${itemClassName}`)
+            let index = Number(item.getAttribute('data-index'))
-            .each(function () {
+            if (index < state.localIndex - 2) {
-              let index = $(this).data('index')
+              console.log(2, appInsMap.get(Number(index)))
-              if (index < state.localIndex - 2) {
+              appInsMap.get(index).unmount()
-                appInsMap.get(index).unmount()
+            }
-              }
+            _css(item, 'top', (state.localIndex - 2) * state.wrapper.height)
-              $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
+          })
-            })
         }
       } else {
         let addItemIndex = state.localIndex - 2
-        let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
+        let res = wrapperEl.value.querySelector(`.${itemClassName}[data-index='${addItemIndex}']`)
 
         if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
-          if (res.length === 0) {
+          if (!res) {
             wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
-            appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
+            let index = wrapperEl.value
+              .querySelector(`.${itemClassName}:last-child`)
+              .getAttribute('data-index')
+            appInsMap.get(Number(index)).unmount()
             // $(wrapperEl.value).find(".base-slide-item:last").remove()
-            $(wrapperEl.value)
+            wrapperEl.value.querySelectorAll(`.${itemClassName}`).forEach((item) => {
-              .find(`.${itemClassName}`)
+              _css(item, 'top', (state.localIndex - 2) * state.wrapper.height)
-              .each(function () {
+            })
-                $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
-              })
           }
         }
 
         if (state.wrapper.childrenLength > props.virtualTotal) {
-          appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
+          let index = wrapperEl.value
+            .querySelector(`.${itemClassName}:last-child`)
+            .getAttribute('data-index')
+          appInsMap.get(Number(index)).unmount()
         }
       }
       state.wrapper.childrenLength = wrapperEl.value.children.length

src/main.ts

@@ -8,8 +8,6 @@ import mixin from './utils/mixin'
 import VueLazyload from '@jambonn/vue-lazyload'
 import { createPinia } from 'pinia'
 
-HTMLElement.prototype._rawAddEventListener_ = HTMLElement.prototype.addEventListener
-HTMLElement.prototype._rawRemoveEventListener_ = HTMLElement.prototype.removeEventListener
 window.isMoved = false
 HTMLElement.prototype.addEventListener = new Proxy(HTMLElement.prototype.addEventListener, {
   apply(target, ctx, args) {

src/mock/index.ts

@@ -95,7 +95,7 @@ const t = [
   // }
 ]
 
-allRecommendVideos.unshift(...t)
+// allRecommendVideos.unshift(...t)
 // {
 //   type: 'user-imgs',
 //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,

src/pages/home/slide/Community.vue

@@ -56,9 +56,7 @@ import ScrollList from '@/components/ScrollList.vue'
 import { useBaseStore } from '@/store/pinia'
 import AlbumDetail from '@/pages/other/AlbumDetail.vue'
 import Mock from 'mockjs'
-import $ from 'jquery'
+import { _css } from '@/utils/dom'
-
-//@click="nav('album-detail',{},item)"
 
 const nav = useNav()
 const baseStore = useBaseStore()
@@ -98,32 +96,32 @@ watch(
 )
 
 function close() {
-  let s = $('.shadow ')
+  let s = document.querySelector('.shadow ')
   let domRect = rect.value
   let t = '.3'
-  s.css('transition', `all ${t}s`)
+  _css(s, 'transition', `all ${t}s`)
-  s.css('top', domRect.top)
+  _css(s, 'top', domRect.top)
-  s.css('left', domRect.left)
+  _css(s, 'left', domRect.left)
-  s.css('width', domRect.width)
+  _css(s, 'width', domRect.width)
-  s.css('height', domRect.height)
+  _css(s, 'height', domRect.height)
 
-  let a = $('.goods-detail')
+  let a = document.querySelector('.goods-detail')
-  a.css('transition', `all ${t}s`)
+  _css(a, 'transition', `all ${t}s`)
-  a.css('opacity', '0')
+  _css(a, 'opacity', '0')
-  a.css('width', '100vw')
+  _css(a, 'width', '100vw')
-  a.css('height', '100vh')
+  _css(a, 'height', '100vh')
-  a.css('transform', `scale(${domRect.sw},${domRect.sh})`)
+  _css(a, 'transform', `scale(${domRect.sw},${domRect.sh})`)
-  a.css('transform-origin', `0 0`)
+  _css(a, 'transform-origin', `0 0`)
 
-  let d = $('.shadow .wrap')
+  let d = document.querySelector('.shadow .wrap')
-  d.css('transition', `all ${t}s`)
+  _css(d, 'transition', `all ${t}s`)
-  d.css('opacity', '1')
+  _css(d, 'opacity', '1')
 
   // state.d = false
   setTimeout(() => {
-    s.css('z-index', '-100')
+    _css(s, 'z-index', '-100')
-    s.css('transition', 'all 0s')
+    _css(s, 'transition', 'all 0s')
-    s.css('top', '-200vh')
+    _css(s, 'top', '-200vh')
   }, 300)
 }
 
@@ -144,52 +142,54 @@ function showDetail(e, item) {
   // console.log(state.current)
 
   state.d = true
-  let domRect = e.currentTarget.getBoundingClientRect()
-  // console.log('e', domRect)
-  let s = $('.shadow ')
 
-  s.css('z-index', '1')
+  let domRect = e.currentTarget.getBoundingClientRect()
-  s.css('transition', '0s')
+  // // console.log('e', domRect)
-  s.css('top', domRect.top)
+
-  s.css('left', domRect.left)
+  let s = document.querySelector('.shadow')
-  s.css('width', domRect.width)
+
-  s.css('height', domRect.height)
+  _css(s, 'z-index', '1')
+  _css(s, 'transition', '0s')
+  _css(s, 'top', domRect.top)
+  _css(s, 'left', domRect.left)
+  _css(s, 'width', domRect.width)
+  _css(s, 'height', domRect.height)
 
   let t = '.3'
-  let d = $('.shadow .wrap')
+  let d = document.querySelector('.shadow .wrap')
-  d.empty()
+  d.innerHTML = ''
-  d.show()
+  d.append(e.currentTarget.cloneNode(true))
-  d.append($(e.currentTarget).clone())
+  _css(d, 'display', 'block')
-  d.css('transition', `all ${t}s`)
+  _css(d, 'transition', `all ${t}s`)
-  d.css('opacity', '1')
+  _css(d, 'opacity', '1')
 
   let sw = domRect.width / baseStore.bodyWidth
   let sh = domRect.height / baseStore.bodyHeight
   domRect.sw = sw
   domRect.sh = sh
 
-  let a = $('.goods-detail')
+  let a = document.querySelector('.goods-detail')
-  a.css('opacity', '0')
+  _css(a, 'opacity', '0')
-  a.css('width', '100vw')
+  _css(a, 'width', '100vw')
-  a.css('height', '100vh')
+  _css(a, 'height', '100vh')
-  a.css('transform', `scale(${domRect.sw},${domRect.sh})`)
+  _css(a, 'transform', `scale(${domRect.sw},${domRect.sh})`)
-  a.css('transform-origin', `0 0`)
+  _css(a, 'transform-origin', `0 0`)
 
   rect.value = domRect
   setTimeout(() => {
-    s.css('transition', `all ${t}s`)
+    _css(s, 'transition', `all ${t}s`)
-    s.css('top', 0)
+    _css(s, 'top', 0)
-    s.css('left', 0)
+    _css(s, 'left', 0)
-    s.css('width', '100vw')
+    _css(s, 'width', '100vw')
-    s.css('height', '100vh')
+    _css(s, 'height', '100vh')
 
-    d.css('opacity', '0')
+    _css(d, 'opacity', '0')
-    d.css('z-index', '-1')
+    _css(d, 'z-index', '-1')
 
-    a.css('transition', `all ${t}s`)
+    _css(a, 'transition', `all ${t}s`)
-    a.css('opacity', '1')
+    _css(a, 'opacity', '1')
-    a.css('transform', `scale(1,1)`)
+    _css(a, 'transform', `scale(1,1)`)
-    a.css('transform-origin', `0 0`)
+    _css(a, 'transform-origin', `0 0`)
   })
 }
 </script>

src/pages/message/chat/Chat.vue

@@ -191,7 +191,6 @@ import { computed, inject, nextTick, onMounted, onUnmounted, reactive, ref } fro
 import Loading from '@/components/Loading.vue'
 import { useBaseStore } from '@/store/pinia'
 import { _checkImgUrl, _no, _sleep } from '@/utils'
-import $ from 'jquery'
 import { useRouter } from 'vue-router'
 import { useNav } from '@/utils/hooks/useNav'
 
@@ -238,6 +237,7 @@ const mitt = inject('mitt')
 const router = useRouter()
 const nav = useNav()
 const store = useBaseStore()
+const msgWrapper = ref<HTMLDivElement>()
 const data = reactive({
   previewImg: new URL('../../../assets/img/poster/3.jpg', import.meta.url).href,
   videoCall: [],
@@ -488,12 +488,16 @@ const data = reactive({
 })
 
 onMounted(() => {
-  $('img').on('load', scrollBottom)
+  msgWrapper.value
+    .querySelectorAll('img')
+    .forEach((item) => item.addEventListener('load', scrollBottom))
   scrollBottom()
 })
 
 onUnmounted(() => {
-  $('img').off('load', scrollBottom)
+  msgWrapper.value
+    .querySelectorAll('img')
+    .forEach((item) => item.removeEventListener('load', scrollBottom))
 })
 
 const isExpand = computed(() => {
@@ -505,8 +509,6 @@ function handleClick() {
   data.showOption = false
 }
 
-const msgWrapper = ref()
-
 function scrollBottom() {
   nextTick(() => {
     let wrapper = msgWrapper.value

src/utils/dom.ts

@@ -142,3 +142,48 @@ export default class Dom {
     return parseInt(val)
   }
 }
+
+export function _css(el, key, value?) {
+  const reg = /^\d+(px|pt|em|rem|vw|vh|%|rpx)$/i
+  if (value === undefined) {
+    let val = null
+    if ('getComputedStyle' in window) {
+      val = window.getComputedStyle(el, null)[key]
+    } else {
+      val = el.currentStyle[key]
+    }
+    return reg.test(val) ? parseFloat(val) : val
+    // return parseFloat(val)
+  } else {
+    if (
+      [
+        'top',
+        'left',
+        'bottom',
+        'right',
+        'width',
+        'height',
+        'font-size',
+        'margin',
+        'padding'
+      ].includes(key)
+    ) {
+      if (!reg.test(value)) {
+        value += 'px'
+      }
+    }
+    // console.log(value)
+    if (key === 'transform') {
+      //直接设置不生效
+      el.style.webkitTransform =
+        el.style.MsTransform =
+        el.style.msTransform =
+        el.style.MozTransform =
+        el.style.OTransform =
+        el.style.transform =
+          value
+    } else {
+      el.style[key] = value
+    }
+  }
+}

src/utils/slide.ts

@@ -79,8 +79,7 @@ function canNext(state, isNext) {
  * @param state
  */
 export function slideTouchStart(e, el, state) {
-  console.log('e', e, state.name)
+  // console.log('e', e, state.name)
-  return
   if (!checkEvent(e)) return
   Utils.$setCss(el, 'transition-duration', `0ms`)
   //记录起点坐标，用于move事件计算移动距离
@@ -245,7 +244,7 @@ export function slideReset(e, el, state, emit = null) {
 
 //根据当前index，获取slide偏移距离
 //如果每个页面的宽度是相同均为100%，只需要当前index * wrapper的宽（高）度即可： -state.localIndex * state.wrapper.width
-export function getSlideOffset(state, el) {
+export function getSlideOffset(state: any, el: HTMLDivElement) {
   //横竖判断逻辑基本同理
   if (state.type === SlideType.HORIZONTAL) {
     let widths = []
@@ -262,7 +261,10 @@ export function getSlideOffset(state, el) {
     return 0
     // return -state.localIndex * state.wrapper.width
   } else {
+    //VERTICAL_INFINITE 列表只需要计算index * 高就行
     if (state.type === SlideType.VERTICAL_INFINITE) {
+      return -state.localIndex * state.wrapper.height
+    } else {
       //同上
       let heights = []
       Array.from(el.children).map((v) => {
@@ -271,9 +273,6 @@ export function getSlideOffset(state, el) {
       heights = heights.slice(0, state.localIndex)
       if (heights.length) return -heights.reduce((a, b) => a + b)
       return 0
-    } else {
-      //VERTICAL_INFINITE 列表只需要计算index * 高就行
-      return -state.localIndex * state.wrapper.height
     }
   }
 }

vite.config.ts

@@ -63,12 +63,6 @@ export default defineConfig(async () => {
             name: 'mockjs',
             var: 'Mock',
             path: 'https://lib.baomitu.com/Mock.js/1.0.1-beta3/mock-min.js'
-          },
-
-          {
-            name: 'jquery',
-            var: '$',
-            path: 'https://lib.baomitu.com/jquery/3.6.0/jquery.min.js'
           }
         ]
       })