feat: ready add SeamlessScroll component

src/components/Cropper/src/Cropper.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'vue'
 
-import { defineComponent, onBeforeMount, nextTick, ref, unref, computed, PropType, getCurrentInstance } from 'vue'
-
+import { defineComponent, onBeforeMount, nextTick, ref, unref, computed, PropType } from 'vue'
+import { templateRef } from '@vueuse/core'
 import { useAttrs } from '/@/utils/useAttrs'
 import { emitter } from '/@/utils/mitt'
 
@@ -64,8 +64,8 @@ export default defineComponent({
     }
   },
   setup(props) {
-    let vm: any
     const cropper: any = ref<Nullable<Cropper>>(null)
+    const imgElRef = templateRef<HTMLElement | null>('imgElRef', null)
 
     const isReady = ref(false)
 
@@ -88,7 +88,7 @@ export default defineComponent({
     )
 
     async function init() {
-      const imgEl = vm.refs.imgElRef
+      const imgEl = unref(imgElRef)
       if (!imgEl) {
         return
       }
@@ -102,7 +102,6 @@ export default defineComponent({
     }
 
     onBeforeMount(() => {
-      vm = getCurrentInstance()
       nextTick(() => {
         init()
         // tsx语法返回渲染模板，外部组件想调用内部方法或者获取setup里面的实例，暂时想到的办法是通过公共事件

src/components/SeamlessScroll/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue"
+import seamlessScroll from "./src/SeamlessScroll.vue"
+
+export const SeamlessScroll = Object.assign(seamlessScroll, {
+  install(app: App) {
+    app.component(seamlessScroll.name, seamlessScroll)
+  }
+})
+
+export default SeamlessScroll

src/components/SeamlessScroll/src/SeamlessScroll.vue

@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+
+<script lang='ts'>
+export default {
+  name: "SeamlessScroll",
+  setup() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+</style>

src/components/SeamlessScroll/src/utils.ts

@@ -0,0 +1,114 @@
+/**
+ * @desc AnimationFrame简单兼容hack
+ */
+const animationFrame = () => {
+  window.cancelAnimationFrame = (function () {
+    return window.cancelAnimationFrame ||
+      window.webkitCancelAnimationFrame ||
+      window.mozCancelAnimationFrame ||
+      window.oCancelAnimationFrame ||
+      window.msCancelAnimationFrame ||
+      function (id) {
+        return window.clearTimeout(id)
+      }
+  })()
+  window.requestAnimationFrame = function () {
+    return (
+      window.requestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.oRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function (callback) {
+        return window.setTimeout(callback, 1000 / 60)
+      }
+    )
+  }()
+}
+
+/**
+ * @desc 判断数组是否相等
+ * @param {arr1,arr2}
+ * @return {Boolean}
+ */
+const arrayEqual = (arr1: Array<any>, arr2: Array<any>) => {
+  if (arr1 === arr2) return true
+  if (arr1.length !== arr2.length) return false
+  for (let i = 0; i < arr1.length; ++i) {
+    if (arr1[i] !== arr2[i]) return false
+  }
+  return true
+}
+
+/**
+ * @desc 深浅合并拷贝
+ */
+function copyObj() {
+  if (!Array.isArray) {
+    // @ts-expect-error
+    Array.isArray = function (arg) {
+      return Object.prototype.toString.call(arg) === '[object Array]'
+    }
+  }
+  let name, options, src, copy, copyIsArray, clone,
+    i = 1,
+    target = arguments[0] || {}, // 使用||运算符，排除隐式强制类型转换为false的数据类型
+    deep = false,
+    len = arguments.length
+  if (typeof target === 'boolean') {
+    deep = target
+    target = arguments[1] || {}
+    i++
+  }
+  if (typeof target !== 'object' && typeof target !== 'function') {
+    target = {}
+  }
+  // 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]，则直接返回target对象
+  if (i === len) {
+    return target
+  }
+  for (; i < len; i++) {
+    //所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象
+    if ((options = arguments[i]) != null) {
+      // 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性
+      for (name in options) {
+        // src用于判断target对象是否存在name属性
+        src = target[name]
+        // 需要复制的属性当前源对象的name属性
+        copy = options[name]
+        // 判断copy是否是数组
+        copyIsArray = Array.isArray(copy)
+        // 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止
+        if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
+          if (copyIsArray) {
+            copyIsArray = false
+            // 如果目标对象存在name属性且是一个数组
+            // 则使用目标对象的name属性，否则重新创建一个数组，用于复制
+            clone = src && Array.isArray(src) ? src : []
+          } else {
+            // 如果目标对象存在name属性且是一个对象则使用目标对象的name属性，否则重新创建一个对象，用于复制
+            clone = src && typeof src === 'object' ? src : {}
+          }
+          // 深复制，所以递归调用copyObject函数
+          // 返回值为target对象，即clone对象
+          // copy是一个源对象
+          // @ts-expect-error
+          target[name] = copyObj(deep, clone, copy)
+        } else if (copy !== undefined) {
+          // 浅复制，直接复制到target对象上
+          target[name] = copy
+        }
+      }
+    }
+  }
+  return target
+}
+
+export default {
+  animationFrame,
+  arrayEqual,
+  copyObj
+}
+
+
+

types/global.d.ts

@@ -18,7 +18,13 @@ declare global {
   }
   declare interface Window {
     // Global vue app instance
-    __APP__: App<Element>
+    __APP__: App<Element>,
+    mozCancelAnimationFrame: (id?: any) => any,
+    oCancelAnimationFrame: (id?: any) => any,
+    msCancelAnimationFrame: (id?: any) => any,
+    mozRequestAnimationFrame: (id?: any) => any,
+    oRequestAnimationFrame: (id?: any) => any,
+    msRequestAnimationFrame: (id?: any) => any
   }
 
   // vue