style(components): canonical code

src/components/BreadCrumb/index.ts

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

src/components/Cropper/index.ts

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

src/components/Cropper/src/index.ts

@@ -1,131 +0,0 @@
-/**
-<template>
-  <div :class="$attrs.class" :style="getWrapperStyle">
-    <img
-      v-show="isReady"
-      ref="imgElRef"
-      :src="src"
-      :alt="alt"
-      :crossorigin="crossorigin"
-      :style="getImageStyle"
-    />
-  </div>
-</template>
-<script lang="ts">
-  import type { CSSProperties } from 'vue';
-
-  import { defineComponent, onMounted, ref, unref, computed, PropType } from 'vue';
-
-  import Cropper from 'cropperjs';
-  import 'cropperjs/dist/cropper.css';
-
-  type Options = Cropper.Options;
-
-  const defaultOptions: Cropper.Options = {
-    aspectRatio: 16 / 9,
-    zoomable: true,
-    zoomOnTouch: true,
-    zoomOnWheel: true,
-    cropBoxMovable: true,
-    cropBoxResizable: true,
-    toggleDragModeOnDblclick: true,
-    autoCrop: true,
-    background: true,
-    highlight: true,
-    center: true,
-    responsive: true,
-    restore: true,
-    checkCrossOrigin: true,
-    checkOrientation: true,
-    scalable: true,
-    modal: true,
-    guides: true,
-    movable: true,
-    rotatable: true,
-  };
-  export default defineComponent({
-    name: "Cropper",
-    props: {
-      src: {
-        type: String,
-        required: true,
-      },
-      alt: {
-        type: String,
-      },
-      height: {
-        type: [String, Number],
-        default: '360px',
-      },
-      crossorigin: {
-        type: String,
-        default: undefined,
-      },
-      imageStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: {},
-      },
-      options: {
-        type: Object as PropType<Options>,
-        default: {},
-      },
-    },
-    setup(props, ctx) {
-      const imgElRef = ref<ElRef<HTMLImageElement>>(null);
-      const cropper: any = ref<Nullable<Cropper>>(null);
-
-      const isReady = ref(false);
-
-      const getImageStyle = computed(
-        (): CSSProperties => {
-          return {
-            height: props.height,
-            maxWidth: '100%',
-            ...props.imageStyle,
-          };
-        }
-      );
-
-      const getWrapperStyle = computed(
-        (): CSSProperties => {
-          const { height } = props;
-          return { height: `${height}`.replace(/px/, '') + 'px' };
-        }
-      );
-
-      async function init() {
-        const imgEl = unref(imgElRef);
-        if (!imgEl) {
-          return;
-        }
-        cropper.value = new Cropper(imgEl, {
-          ...defaultOptions,
-          ready: () => {
-            isReady.value = true;
-          },
-          ...props.options,
-        });
-      }
-
-      // event: return base64 and width and height information after cropping
-      const croppered = (): void => {
-        let imgInfo = cropper.value.getData();
-        cropper.value.getCroppedCanvas().toBlob(blob => {
-        let fileReader: FileReader = new FileReader()
-          fileReader.onloadend = (e: any) => {
-            ctx.emit("cropperedInfo", {
-              imgBase64: e.target.result,
-              imgInfo
-            })
-          }
-          fileReader.readAsDataURL(blob)
-        }, 'image/jpeg')
-      }
-
-      onMounted(init);
-
-      return { imgElRef, getWrapperStyle, getImageStyle, isReady, croppered };
-    },
-  });
-</script>
- */

src/components/Flop/index.ts

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

src/components/FlowChart/index.ts

@@ -1,22 +0,0 @@
-import { App } from "vue"
-import control from "./src/Control.vue"
-import nodePanel from "./src/NodePanel.vue"
-import dataDialog from "./src/DataDialog.vue"
-
-export const Control = Object.assign(control, {
-  install(app: App) {
-    app.component(control.name, control)
-  }
-})
-
-export const NodePanel = Object.assign(nodePanel, {
-  install(app: App) {
-    app.component(nodePanel.name, nodePanel)
-  }
-})
-
-export const DataDialog = Object.assign(dataDialog, {
-  install(app: App) {
-    app.component(dataDialog.name, dataDialog)
-  }
-})

src/components/HamBurger/index.ts

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

src/components/ReBreadCrumb/index.ts

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

src/components/ReBreadCrumb/src/index.vue

@@ -22,7 +22,7 @@ import { ref, defineComponent, watch, Ref } from "vue";
 import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
 
 export default defineComponent({
-  name: "BreadCrumb",
+  name: "ReBreadCrumb",
   setup() {
     const levelList: Ref<RouteLocationMatched[]> = ref([]);
     const route = useRoute();

src/components/ReCountTo/index.ts

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

src/components/ReCropper/index.ts

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

src/components/ReCropper/src/index.tsx

@@ -11,7 +11,6 @@ import {
 } from "vue";
 import { templateRef } from "@vueuse/core";
 import { useAttrs } from "/@/utils/useAttrs";
-import { emitter } from "/@/utils/mitt";
 
 import Cropper from "cropperjs";
 import "cropperjs/dist/cropper.css";
@@ -40,6 +39,7 @@ const defaultOptions: Cropper.Options = {
   movable: true,
   rotatable: true,
 };
+
 export default defineComponent({
   name: "Cropper",
   props: {
@@ -73,7 +73,7 @@ export default defineComponent({
   },
   setup(props) {
     const cropper: any = ref<Nullable<Cropper>>(null);
-    const imgElRef = templateRef<HTMLElement | null>("imgElRef", null);
+    const imgElRef = templateRef<HTMLImageElement | null>("imgElRef", null);
 
     const isReady = ref(false);
 
@@ -98,7 +98,7 @@ export default defineComponent({
       }
     );
 
-    async function init() {
+    function init() {
       const imgEl = unref(imgElRef);
       if (!imgEl) {
         return;
@@ -115,23 +115,31 @@ export default defineComponent({
     onBeforeMount(() => {
       nextTick(() => {
         init();
-        // tsx语法返回渲染模板，外部组件想调用内部方法或者获取setup里面的实例，暂时想到的办法是通过公共事件
-        emitter.emit("cropperInstance", unref(cropper));
       });
     });
 
-    return () => (
+    return {
+      props,
+      imgElRef,
+      cropper,
+      getWrapperStyle,
+      getImageStyle,
+    };
+  },
+
+  render() {
+    return (
       <>
         <div
           class={useAttrs({ excludeListeners: true, excludeKeys: ["class"] })}
-          style={unref(getWrapperStyle)}
+          style={this.getWrapperStyle}
         >
           <img
             ref="imgElRef"
-            src={props.src}
+            src={this.props.src}
-            alt={props.alt}
+            alt={this.props.alt}
-            crossorigin={props.crossorigin}
+            crossorigin={this.props.crossorigin}
-            style={unref(getImageStyle)}
+            style={this.getImageStyle}
           />
         </div>
       </>

src/components/ReFlop/index.ts

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

src/components/ReFlop/src/Filpper.tsx

@@ -0,0 +1,95 @@
+import { defineComponent, ref } from "vue";
+import { propTypes } from "/@/utils/propTypes";
+import "./filpper.css";
+
+export default defineComponent({
+  name: "Filpper",
+  props: {
+    // front paper text
+    // 前牌文字
+    frontText: propTypes.number.def(0),
+    // back paper text
+    // 后牌文字
+    backText: propTypes.number.def(1),
+    // flipping duration, please be consistent with the CSS animation-duration value.
+    // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+    duration: propTypes.number.def(600),
+  },
+  setup(props) {
+    const { frontText, backText, duration } = props;
+    let isFlipping = ref(false);
+    let flipType = ref("down");
+    let frontTextFromData = ref(frontText);
+    let backTextFromData = ref(backText);
+
+    const textClass = (number: number) => {
+      return "number" + number;
+    };
+
+    const flip = (type: string, front: number, back: number) => {
+      // 如果处于翻转中，则不执行
+      if (isFlipping.value) return false;
+      frontTextFromData.value = front;
+      backTextFromData.value = back;
+      // 根据传递过来的type设置翻转方向
+      flipType.value = type;
+      // 设置翻转状态为true
+      isFlipping.value = true;
+
+      setTimeout(() => {
+        // 设置翻转状态为false
+        isFlipping.value = false;
+        frontTextFromData.value = back;
+      }, duration);
+    };
+
+    // 下翻牌
+    const flipDown = (front: any, back: any): void => {
+      flip("down", front, back);
+    };
+
+    // 上翻牌
+    const flipUp = (front: any, back: any): void => {
+      flip("up", front, back);
+    };
+
+    // 设置前牌文字
+    function setFront(text: number): void {
+      frontTextFromData.value = text;
+    }
+
+    // 设置后牌文字
+    const setBack = (text: number): void => {
+      backTextFromData.value = text;
+    };
+
+    return {
+      flipType,
+      isFlipping,
+      frontTextFromData,
+      backTextFromData,
+      textClass,
+      flipDown,
+      flipUp,
+      setFront,
+      setBack,
+    };
+  },
+
+  render() {
+    return (
+      <>
+        <div
+          class={`m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`}
+        >
+          <div
+            class={`digital front ${this.textClass(this.frontTextFromData)}`}
+          ></div>
+          <div
+            class={`digital back ${this.textClass(this.backTextFromData)}`}
+          ></div>
+        </div>
+      </>
+    );
+  },
+});

src/components/ReFlop/src/filpper.css

@@ -1,98 +1,3 @@
-<template>
-  <div class="m-flipper" :class="[flipType, {'go': isFlipping}]">
-    <div class="digital front" :class="textClass(frontTextFromData)"></div>
-    <div class="digital back" :class="textClass(backTextFromData)"></div>
-  </div>
-</template>
-
-<script lang='ts'>
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  props: {
-    // front paper text
-    // 前牌文字
-    frontText: {
-      type: [Number, String],
-      default: 0
-    },
-    // back paper text
-    // 后牌文字
-    backText: {
-      type: [Number, String],
-      default: 1
-    },
-    // flipping duration, please be consistent with the CSS animation-duration value.
-    // 翻牌动画时间，与CSS中设置的animation-duration保持一致
-    duration: {
-      type: Number,
-      default: 600
-    }
-  },
-  setup(props) {
-    const { frontText, backText, duration } = props;
-    let isFlipping = ref(false);
-    let flipType = ref("down");
-    let frontTextFromData = ref(frontText);
-    let backTextFromData = ref(backText);
-
-    const textClass = (number: string) => {
-      return "number" + number;
-    };
-
-    const flip = (type: string, front: number, back: number) => {
-      // 如果处于翻转中，则不执行
-      if (isFlipping.value) return false;
-      frontTextFromData.value = front;
-      backTextFromData.value = back;
-      // 根据传递过来的type设置翻转方向
-      flipType.value = type;
-      // 设置翻转状态为true
-      isFlipping.value = true;
-
-      setTimeout(() => {
-        // 设置翻转状态为false
-        isFlipping.value = false;
-        frontTextFromData.value = back;
-      }, duration);
-    };
-
-    // 下翻牌
-    const flipDown = (front: any, back: any): void => {
-      flip("down", front, back);
-    };
-
-    // 上翻牌
-    const flipUp = (front: any, back: any): void => {
-      flip("up", front, back);
-    };
-
-    // 设置前牌文字
-    const setFront = (text: number): void => {
-      frontTextFromData.value = text;
-    };
-
-    // 设置后牌文字
-    const setBack = (text: number): void => {
-      backTextFromData.value = text;
-    };
-
-    return {
-      isFlipping,
-      flipType,
-      frontTextFromData,
-      backTextFromData,
-      textClass,
-      flip,
-      flipDown,
-      flipUp,
-      setFront,
-      setBack
-    };
-  }
-});
-</script>
-
-<style>
 .m-flipper {
   display: inline-block;
   position: relative;
@@ -277,4 +182,3 @@ export default defineComponent({
 .m-flipper .number9:after {
   content: "9";
 }
-</style>

src/components/ReFlop/src/index.vue

@@ -13,11 +13,11 @@
 
 <script lang='ts'>
 import { ref, onBeforeMount, getCurrentInstance, nextTick } from "vue";
-import flippers from "./Flipper.vue";
+import flippers from "./Filpper";
 export default {
   name: "Flop",
   components: {
-    flippers,
+    flippers
   },
   setup() {
     let vm: any;
@@ -68,7 +68,7 @@ export default {
         "d+": date.getDate(),
         "h+": date.getHours(),
         "i+": date.getMinutes(),
-        "s+": date.getSeconds(),
+        "s+": date.getSeconds()
       };
       for (let k in o) {
         if (new RegExp(`(${k})`).test(dateFormat)) {
@@ -102,7 +102,7 @@ export default {
           vm.refs.flipperMinute1,
           vm.refs.flipperMinute2,
           vm.refs.flipperSecond1,
-          vm.refs.flipperSecond2,
+          vm.refs.flipperSecond2
         ];
 
         init();
@@ -116,9 +116,9 @@ export default {
       init,
       run,
       formatDate,
-      padLeftZero,
+      padLeftZero
     };
-  },
+  }
 };
 </script>
 

src/components/ReFlowChart/index.ts

@@ -0,0 +1,22 @@
+import { App } from "vue";
+import control from "./src/Control.vue";
+import nodePanel from "./src/NodePanel.vue";
+import dataDialog from "./src/DataDialog.vue";
+
+export const Control = Object.assign(control, {
+  install(app: App) {
+    app.component(control.name, control);
+  },
+});
+
+export const NodePanel = Object.assign(nodePanel, {
+  install(app: App) {
+    app.component(nodePanel.name, nodePanel);
+  },
+});
+
+export const DataDialog = Object.assign(dataDialog, {
+  install(app: App) {
+    app.component(dataDialog.name, dataDialog);
+  },
+});

src/components/ReHamBurger/index.ts

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

src/components/ReSeamlessScroll/index.ts

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

src/components/ReSelector/index.ts

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

src/components/ReSelector/src/index.tsx

@@ -1,39 +1,14 @@
-/** 
-<template>
-  <table cellspacing="0" cellpadding="0">
-    <tbody>
-      <tr>
-        <td
-          v-for="(item, key) in max"
-          :data-index="HsKey"
-          :ref="'hstd' + HsKey + key"
-          :class="['hs-select__item' + key]"
-          @mousemove.prevent="setCurrentValue(key, $event)"
-          @mouseleave.prevent="resetCurrentValue(key)"
-          @click="selectValue(key, item)"
-          :style="{ cursor: rateDisabled ? 'auto' : 'pointer', 'text-align': 'center' }"
-          :key="key"
-        >
-          <div :ref="'hsdiv' + HsKey + key" :class="[classes[key] + key]" class="hs-item">
-            <span>{{item}}</span>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script lang='ts'>
 import {
   defineComponent,
   computed,
   nextTick,
   onBeforeMount,
   getCurrentInstance,
+  unref,
 } from "vue";
 import { addClass, removeClass, toggleClass } from "/@/utils/operate";
+import "./index.css";
 
-// 选中非选中状态
 let stayClass = "stay"; //鼠标点击
 let activeClass = "hs-on"; //鼠标移动上去
 let voidClass = "hs-off"; //鼠标移开
@@ -42,11 +17,10 @@ let bothLeftSides = "both-left-sides";
 let bothRightSides = "both-right-sides";
 let selectedDirection = "right"; //默认从左往右，索引变大
 
+let overList = [];
 // 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素
 let selectedList = [];
 
-let overList = [];
-
 export default defineComponent({
   name: "Selector",
   props: {
@@ -63,8 +37,8 @@ export default defineComponent({
       default: 0,
     },
     max: {
-      type: Number,
+      type: Array,
-      default: 10,
+      default: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
     },
     // 回显数据的索引，长度必须是2
     echo: {
@@ -91,14 +65,14 @@ export default defineComponent({
       for (; i < threshold; i++) {
         result.push(activeClass);
       }
-      for (; i < props.max; i++) {
+      for (; i < props.max.length; i++) {
         result.push(voidClass);
       }
       return result;
     });
 
     // 鼠标移入
-    const setCurrentValue = (index, event) => {
+    const setCurrentValue = (index) => {
       if (props.disabled) return;
       // 当选中一个元素后，开始添加背景色
       if (selectedList.length === 1) {
@@ -242,7 +216,7 @@ export default defineComponent({
 
           selectedList = [];
           overList = [];
-          for (let i = 0; i <= props.max; i++) {
+          for (let i = 0; i <= props.max.length; i++) {
             let currentDom = document.querySelector(".hs-select__item" + i);
             if (currentDom) {
               removeClass(currentDom, inRange);
@@ -263,6 +237,7 @@ export default defineComponent({
     // 回显数据
     const echoView = (item) => {
       if (item.length === 0) return;
+
       if (item.length > 2 || item.length === 1) {
         throw "传入的数组长度必须是2";
       }
@@ -300,41 +275,39 @@ export default defineComponent({
       });
     });
 
-    return {
+    return () => (
-      rateDisabled,
+      <>
-      setCurrentValue,
+        <table cellspacing="0" cellpadding="0">
-      resetCurrentValue,
+          <tbody>
-      selectValue,
+            <tr>
-      classes,
+              {props.max.map((item, key) => {
-      echoView,
+                return (
-    };
+                  <td
+                    data-index={props.HsKey}
+                    ref={`hstd${props.HsKey}${key}`}
+                    class={`hs-select__item${key}`}
+                    onMousemove={() => setCurrentValue(key)}
+                    onMouseleave={() => resetCurrentValue(key)}
+                    onClick={() => selectValue(key, item)}
+                    style={{
+                      cursor: unref(rateDisabled) ? "auto" : "pointer",
+                      textAlign: "center",
+                    }}
+                    key={key}
+                  >
+                    <div
+                      ref={`hsdiv${props.HsKey}${key}`}
+                      class={`hs-item ${[unref(classes)[key] + key]}`}
+                    >
+                      <span>{item}</span>
+                    </div>
+                  </td>
+                );
+              })}
+            </tr>
+          </tbody>
+        </table>
+      </>
+    );
   },
 });
-</script>
-
-<style scoped>
-.hs-rate__icon {
-  font-size: 18px;
-  transition: 0.3s;
-}
-.hs-item {
-  width: 30px;
-  height: 30px;
-  box-sizing: border-box;
-  line-height: 30px;
-}
-.hs-on {
-  background-color: #409eff;
-  border-radius: 50%;
-}
-.hs-range {
-  background-color: #ccc;
-}
-.both-left-sides {
-  border-radius: 50% 0 0 50%;
-}
-.both-right-sides {
-  border-radius: 0 50% 50% 0;
-}
-</style>
-*/

src/components/ReSplitPane/index.css

@@ -0,0 +1,44 @@
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+.vue-splitter-container {
+  height: 100%;
+  position: relative;
+}
+.vue-splitter-container-mask {
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.splitter-pane.vertical.splitter-paneL {
+  position: absolute;
+  left: 0px;
+  height: 100%;
+  padding-right: 3px;
+}
+.splitter-pane.vertical.splitter-paneR {
+  position: absolute;
+  right: 0px;
+  height: 100%;
+  padding-left: 3px;
+}
+.splitter-pane.horizontal.splitter-paneL {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+}
+.splitter-pane.horizontal.splitter-paneR {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  padding-top: 3px;
+}

src/components/ReSplitPane/index.tsx

@@ -1,45 +1,6 @@
-<template>
+import { defineComponent, ref, unref, computed, PropType } from "vue";
-  <div
+import resizer from "./resizer";
-    :style="{ cursor, userSelect }"
+import "./index.css";
-    class="vue-splitter-container clearfix"
-    @mouseup="onMouseUp"
-    @mousemove="onMouseMove"
-  >
-    <div
-      :class="leftClass"
-      :split="splitSet.split"
-      :style="{ [type]: percent + '%' }"
-    >
-      <slot name="paneL"></slot>
-    </div>
-
-    <resizer
-      :style="{ [resizeType]: percent + '%' }"
-      :split="splitSet.split"
-      @mousedown.prevent="onMouseDown"
-      @click.prevent="onClick"
-    ></resizer>
-
-    <div
-      :class="rightClass"
-      :split="splitSet.split"
-      :style="{ [type]: 100 - percent + '%' }"
-    >
-      <slot name="paneR"></slot>
-    </div>
-
-    <div v-if="active" class="vue-splitter-container-mask"></div>
-  </div>
-</template>
-
-<script lang='ts'>
-import {
-  defineComponent,
-  ref,
-  computed,
-  PropType,
-} from "vue";
-import resizer from "./resizer.vue";
 
 export interface ContextProps {
   minPercent: number;
@@ -60,7 +21,6 @@ export default defineComponent({
   setup(props, ctx) {
     let active = ref(false);
     let hasMoved = ref(false);
-    let height = ref(null);
     let percent = ref(props.splitSet?.defaultPercent);
     let type = props.splitSet?.split === "vertical" ? "width" : "height";
     let resizeType = props.splitSet?.split === "vertical" ? "left" : "top";
@@ -145,69 +105,35 @@ export default defineComponent({
       }
     };
 
-    return {
+    return () => (
-      userSelect,
+      <>
-      cursor,
+        <div
-      active,
+          class="vue-splitter-container clearfix"
-      hasMoved,
+          style={(unref(cursor), unref(userSelect))}
-      height,
+          onMouseup={() => onMouseUp()}
-      percent,
+          onMousemove={() => onMouseMove(event)}
-      type,
+        >
-      resizeType,
+          <div
-      onClick,
+            class={unref(leftClass)}
-      onMouseDown,
+            style={{ [unref(type)]: unref(percent) + "%" }}
-      onMouseUp,
+          >
-      onMouseMove,
+            {ctx.slots.paneL()}
-      leftClass: leftClass.value.join(" "),
+          </div>
-      rightClass: rightClass.value.join(" "),
+          <resizer
-    };
+            style={`${unref([resizeType])}:${unref(percent)}%`}
+            split={props.splitSet?.split}
+            onMousedown={() => onMouseDown()}
+            onClick={() => onClick()}
+          ></resizer>
+          <div
+            class={unref(rightClass)}
+            style={{ [unref(type)]: 100 - unref(percent) + "%" }}
+          >
+            {ctx.slots.paneR()}
+          </div>
+          <div v-show={unref(active)} class="vue-splitter-container-mask"></div>
+        </div>
+      </>
+    );
   },
 });
-</script>
-
-<style scoped>
-.clearfix:after {
-  visibility: hidden;
-  display: block;
-  font-size: 0;
-  content: " ";
-  clear: both;
-  height: 0;
-}
-.vue-splitter-container {
-  height: 100%;
-  position: relative;
-}
-.vue-splitter-container-mask {
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.splitter-pane.vertical.splitter-paneL {
-  position: absolute;
-  left: 0px;
-  height: 100%;
-  padding-right: 3px;
-}
-.splitter-pane.vertical.splitter-paneR {
-  position: absolute;
-  right: 0px;
-  height: 100%;
-  padding-left: 3px;
-}
-.splitter-pane.horizontal.splitter-paneL {
-  position: absolute;
-  top: 0px;
-  width: 100%;
-}
-.splitter-pane.horizontal.splitter-paneR {
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
-  padding-top: 3px;
-}
-</style>

src/components/ReSplitPane/resizer.css

@@ -1,33 +1,3 @@
-<template>
-  <div :class="classes"></div>
-</template>
-
-<script lang='ts'>
-import { computed, defineComponent } from "vue";
-export default defineComponent({
-  name: "resizer",
-  props: {
-    split: {
-      type: String,
-      required: true,
-    },
-    className: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(props, ctx) {
-    let classes = computed(() => {
-      return ["splitter-pane-resizer", props.split, props.className].join(" ");
-    });
-    return {
-      classes,
-    };
-  },
-});
-</script>
-
-<style scoped>
 .splitter-pane-resizer {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -56,4 +26,3 @@ export default defineComponent({
   border-right: 5px solid rgba(255, 255, 255, 0);
   cursor: col-resize;
 }
-</style>

src/components/ReSplitPane/resizer.tsx

@@ -0,0 +1,23 @@
+import { computed, unref, defineComponent } from "vue";
+import "./resizer.css";
+
+export default defineComponent({
+  name: "resizer",
+  props: {
+    split: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props) {
+    let classes = computed(() => {
+      return ["splitter-pane-resizer", props.split, props.className].join(" ");
+    });
+
+    return () => <div class={unref(classes)}></div>;
+  },
+});

src/components/SeamlessScroll/index.ts

@@ -1,10 +0,0 @@
-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/countTo/index.ts

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

src/components/countTo/src/index.ts

@@ -1,180 +0,0 @@
-/**
-<template>
-  <span :style="{color: color,fontSize: fontSize}">{{ displayValue }}</span>
-</template>
-<script lang="ts">
-import {
-  defineComponent,
-  reactive,
-  computed,
-  watch,
-  onMounted,
-  unref,
-  toRef
-} from "vue";
-import { countToProps } from "./props";
-import { isNumber } from "/@/utils/is";
-export default defineComponent({
-  name: "CountTo",
-  props: countToProps,
-  emits: ["mounted", "callback"],
-  setup(props, { emit }) {
-    const state = reactive<{
-      localStartVal: number;
-      printVal: number | null;
-      displayValue: string;
-      paused: boolean;
-      localDuration: number | null;
-      startTime: number | null;
-      timestamp: number | null;
-      rAF: any;
-      remaining: number | null;
-      color: any;
-      fontSize: string;
-    }>({
-      localStartVal: props.startVal,
-      displayValue: formatNumber(props.startVal),
-      printVal: null,
-      paused: false,
-      localDuration: props.duration,
-      startTime: null,
-      timestamp: null,
-      remaining: null,
-      rAF: null,
-      color: null,
-      fontSize: "16px"
-    });
-
-    onMounted(() => {
-      if (props.autoplay) {
-        start();
-      }
-      emit("mounted");
-    });
-
-    const getCountDown = computed(() => {
-      return props.startVal > props.endVal;
-    });
-
-    watch([() => props.startVal, () => props.endVal], () => {
-      if (props.autoplay) {
-        start();
-      }
-    });
-
-    function start() {
-      const { startVal, duration, color, fontSize } = props;
-      state.localStartVal = startVal;
-      state.startTime = null;
-      state.localDuration = duration;
-      state.paused = false;
-      state.color = color;
-      state.fontSize = fontSize;
-      state.rAF = requestAnimationFrame(count);
-    }
-
-    function pauseResume() {
-      if (state.paused) {
-        resume();
-        state.paused = false;
-      } else {
-        pause();
-        state.paused = true;
-      }
-    }
-
-    function pause() {
-      cancelAnimationFrame(state.rAF);
-    }
-
-    function resume() {
-      state.startTime = null;
-      state.localDuration = +(state.remaining as number);
-      state.localStartVal = +(state.printVal as number);
-      requestAnimationFrame(count);
-    }
-
-    function reset() {
-      state.startTime = null;
-      cancelAnimationFrame(state.rAF);
-      state.displayValue = formatNumber(props.startVal);
-    }
-
-    function count(timestamp: number) {
-      const { useEasing, easingFn, endVal } = props;
-      if (!state.startTime) state.startTime = timestamp;
-      state.timestamp = timestamp;
-      const progress = timestamp - state.startTime;
-      state.remaining = (state.localDuration as number) - progress;
-      if (useEasing) {
-        if (unref(getCountDown)) {
-          state.printVal =
-            state.localStartVal -
-            easingFn(
-              progress,
-              0,
-              state.localStartVal - endVal,
-              state.localDuration as number
-            );
-        } else {
-          state.printVal = easingFn(
-            progress,
-            state.localStartVal,
-            endVal - state.localStartVal,
-            state.localDuration as number
-          );
-        }
-      } else {
-        if (unref(getCountDown)) {
-          state.printVal =
-            state.localStartVal -
-            (state.localStartVal - endVal) *
-              (progress / (state.localDuration as number));
-        } else {
-          state.printVal =
-            state.localStartVal +
-            (endVal - state.localStartVal) *
-              (progress / (state.localDuration as number));
-        }
-      }
-      if (unref(getCountDown)) {
-        state.printVal = state.printVal < endVal ? endVal : state.printVal;
-      } else {
-        state.printVal = state.printVal > endVal ? endVal : state.printVal;
-      }
-      state.displayValue = formatNumber(state.printVal);
-      if (progress < (state.localDuration as number)) {
-        state.rAF = requestAnimationFrame(count);
-      } else {
-        emit("callback");
-      }
-    }
-
-    function formatNumber(num: number | string) {
-      const { decimals, decimal, separator, suffix, prefix } = props;
-      num = Number(num).toFixed(decimals);
-      num += "";
-      const x = num.split(".");
-      let x1 = x[0];
-      const x2 = x.length > 1 ? decimal + x[1] : "";
-      const rgx = /(\d+)(\d{3})/;
-      if (separator && !isNumber(separator)) {
-        while (rgx.test(x1)) {
-          x1 = x1.replace(rgx, "$1" + separator + "$2");
-        }
-      }
-      return prefix + x1 + x2 + suffix;
-    }
-
-    return {
-      count,
-      reset,
-      resume,
-      start,
-      pauseResume,
-      displayValue: toRef(state, "displayValue")
-    };
-  }
-});
-</script>
-*/

src/components/selector/index.ts

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

src/components/selector/src/selector.tsx

@@ -1,309 +0,0 @@
-import {
-  defineComponent,
-  computed,
-  nextTick,
-  onBeforeMount,
-  getCurrentInstance,
-  unref
-} from "vue"
-import { addClass, removeClass, toggleClass } from "/@/utils/operate"
-import "./index.css"
-
-let stayClass = "stay" //鼠标点击
-let activeClass = "hs-on" //鼠标移动上去
-let voidClass = "hs-off" //鼠标移开
-let inRange = "hs-range" //当前选中的两个元素之间的背景
-let bothLeftSides = "both-left-sides"
-let bothRightSides = "both-right-sides"
-let selectedDirection = "right" //默认从左往右，索引变大
-
-let overList = []
-// 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素
-let selectedList = []
-
-export default defineComponent({
-  name: "Selector",
-  props: {
-    HsKey: {
-      type: Number || String,
-      default: 0,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: Number,
-      default: 0,
-    },
-    max: {
-      type: Array,
-      default: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-    },
-    // 回显数据的索引，长度必须是2
-    echo: {
-      type: Array,
-      default: [],
-    },
-  },
-  emits: ["selectedVal"],
-  setup(props, { emit }) {
-    let vm: any
-    let currentValue = props.value
-
-    let rateDisabled = computed(() => {
-      return props.disabled
-    })
-
-    let classes = computed(() => {
-      let result = []
-      let i = 0
-      let threshold = currentValue
-      if (currentValue !== Math.floor(currentValue)) {
-        threshold--
-      }
-      for (; i < threshold; i++) {
-        result.push(activeClass)
-      }
-      for (; i < props.max.length; i++) {
-        result.push(voidClass)
-      }
-      return result
-    })
-
-    // 鼠标移入
-    const setCurrentValue = (index) => {
-      if (props.disabled) return
-      // 当选中一个元素后，开始添加背景色
-      if (selectedList.length === 1) {
-        if (overList.length < 1) overList.push({ index })
-
-        let firstIndex = overList[0].index
-
-        // 往右走，索引变大
-        if (index > firstIndex) {
-          selectedDirection = "right"
-          toggleClass(
-            false,
-            bothRightSides,
-            document.querySelector(".hs-select__item" + selectedList[0].index)
-          )
-
-          while (index >= firstIndex) {
-            addClass(
-              document.querySelector(".hs-select__item" + firstIndex),
-              inRange
-            )
-            firstIndex++
-          }
-        } else {
-          selectedDirection = "left"
-          toggleClass(
-            true,
-            bothRightSides,
-            document.querySelector(".hs-select__item" + selectedList[0].index)
-          )
-
-          while (index <= firstIndex) {
-            addClass(
-              document.querySelector(".hs-select__item" + firstIndex),
-              inRange
-            )
-            firstIndex--
-          }
-        }
-      }
-
-      addClass(document.querySelector("." + voidClass + index), activeClass)
-    }
-
-    // 鼠标离开
-    const resetCurrentValue = (index) => {
-      if (props.disabled) return
-      // 移除先检查是否选中 选中则返回false 不移除
-      const currentHsDom = document.querySelector("." + voidClass + index)
-      if (currentHsDom.className.includes(stayClass)) {
-        return false
-      } else {
-        removeClass(currentHsDom, activeClass)
-      }
-
-      // 当选中一个元素后，开始移除背景色
-      if (selectedList.length === 1) {
-        let firstIndex = overList[0].index
-        if (index >= firstIndex) {
-          for (let i = 0; i <= index; i++) {
-            removeClass(
-              document.querySelector(".hs-select__item" + i),
-              inRange
-            )
-          }
-        } else {
-          while (index <= firstIndex) {
-            removeClass(
-              document.querySelector(".hs-select__item" + index),
-              inRange
-            )
-            index++
-          }
-        }
-      }
-    }
-
-    // 鼠标点击
-    const selectValue = (index, item) => {
-      if (props.disabled) return
-      let len = selectedList.length
-
-      if (len < 2) {
-        selectedList.push({ item, index })
-        addClass(document.querySelector("." + voidClass + index), stayClass)
-
-        addClass(
-          document.querySelector(".hs-select__item" + selectedList[0].index),
-          bothLeftSides
-        )
-
-        if (selectedList[1]) {
-          if (selectedDirection === "right") {
-            addClass(
-              document.querySelector(
-                ".hs-select__item" + selectedList[1].index
-              ),
-              bothRightSides
-            )
-          } else {
-            addClass(
-              document.querySelector(
-                ".hs-select__item" + selectedList[1].index
-              ),
-              bothLeftSides
-            )
-          }
-        }
-
-        if (len === 1) {
-          // 顺时针排序
-          if (selectedDirection === "right") {
-            emit("selectedVal", {
-              left: selectedList[0].item,
-              right: selectedList[1].item,
-              whole: selectedList,
-            })
-          } else {
-            emit("selectedVal", {
-              left: selectedList[1].item,
-              right: selectedList[0].item,
-              whole: selectedList,
-            })
-          }
-        }
-      } else {
-        nextTick(() => {
-          selectedList.forEach((v) => {
-            removeClass(
-              document.querySelector("." + voidClass + v.index),
-              activeClass,
-              stayClass
-            )
-
-            removeClass(
-              document.querySelector(".hs-select__item" + v.index),
-              bothLeftSides,
-              bothRightSides
-            )
-          })
-
-          selectedList = []
-          overList = []
-          for (let i = 0; i <= props.max.length; i++) {
-            let currentDom = document.querySelector(".hs-select__item" + i)
-            if (currentDom) {
-              removeClass(currentDom, inRange)
-            }
-          }
-
-          selectedList.push({ item, index })
-          addClass(document.querySelector("." + voidClass + index), stayClass)
-
-          addClass(
-            document.querySelector(".hs-select__item" + selectedList[0].index),
-            bothLeftSides
-          )
-        })
-      }
-    }
-
-    // 回显数据
-    const echoView = (item) => {
-      if (item.length === 0) return
-
-      if (item.length > 2 || item.length === 1) {
-        throw "传入的数组长度必须是2"
-      }
-
-      item.sort((a, b) => {
-        return a - b
-      })
-
-      addClass(
-        vm.refs["hsdiv" + props.HsKey + item[0]],
-        activeClass,
-        stayClass
-      )
-
-      addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides)
-
-      addClass(
-        vm.refs["hsdiv" + props.HsKey + item[1]],
-        activeClass,
-        stayClass
-      )
-
-      addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides)
-
-      while (item[1] >= item[0]) {
-        addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange)
-        item[0]++
-      }
-    }
-
-    onBeforeMount(() => {
-      vm = getCurrentInstance()
-      nextTick(() => {
-        echoView(props.echo)
-      })
-    })
-
-    return () => (
-      <>
-        <table cellspacing="0" cellpadding="0">
-          <tbody>
-            <tr>
-              {
-                props.max.map((item, key) => {
-                  return <td
-                    data-index={props.HsKey}
-                    ref={`hstd${props.HsKey}${key}`}
-                    class={`hs-select__item${key}`}
-                    onMousemove={() => setCurrentValue(key)}
-                    onMouseleave={() => resetCurrentValue(key)}
-                    onClick={() => selectValue(key, item)}
-                    style={{
-                      cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center'
-                    }}
-                    key={key}
-                  >
-                    <div ref={`hsdiv${props.HsKey}${key}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
-                      <span>{item}</span>
-                    </div>
-                  </td>
-                })
-              }
-            </tr>
-          </tbody>
-        </table>
-      </>
-    )
-  }
-})

src/layout/components/Navbar.vue

@@ -42,8 +42,8 @@
 
 <script lang="ts">
 import { ref, defineComponent, onMounted, unref, watch } from "vue";
-import Breadcrumb from "/@/components/BreadCrumb";
+import Breadcrumb from "/@/components/ReBreadCrumb";
-import Hamburger from "/@/components/HamBurger";
+import Hamburger from "/@/components/ReHamBurger";
 import screenfull from "../components/screenfull/index.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useAppStoreHook } from "/@/store/modules/app";

src/views/components/count-to/index.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang='ts'>
-import CountTo from "/@/components/countTo";
+import CountTo from "/@/components/ReCountTo";
 export default {
   components: {
     CountTo

src/views/components/cropping/index.vue

@@ -8,29 +8,28 @@
     <p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref, onBeforeMount, nextTick } from "vue";
-import Cropper from "/@/components/Cropper";
-import img from "./picture.jpeg";
-import { emitter } from "/@/utils/mitt";
 
-let cropperInstance = null;
+<script lang="ts">
-export default defineComponent({
+import { ref, onBeforeMount, nextTick, getCurrentInstance } from "vue";
+import Cropper from "/@/components/ReCropper";
+import img from "./picture.jpeg";
+
+export default {
   components: {
-    Cropper,
+    Cropper
   },
   setup() {
+    let vm: any;
     let info = ref("");
     let cropperImg = ref("");
 
     const onCropper = (): void => {
       nextTick(() => {
-        let imgInfo = cropperInstance.getData();
+        vm.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
-        cropperInstance.getCroppedCanvas().toBlob((blob) => {
           let fileReader: FileReader = new FileReader();
           fileReader.onloadend = (e: any) => {
             cropperImg.value = e.target.result;
-            info.value = imgInfo;
+            info.value = vm.refs.refCropper.cropper.getData();
           };
           fileReader.readAsDataURL(blob);
         }, "image/jpeg");
@@ -38,19 +37,17 @@ export default defineComponent({
     };
 
     onBeforeMount(() => {
-      emitter.on("cropperInstance", (key) => {
+      vm = getCurrentInstance();
-        cropperInstance = key;
-      });
     });
 
     return {
       img,
       info,
       cropperImg,
-      onCropper,
+      onCropper
     };
-  },
+  }
-});
+};
 </script>
 
 <style scoped>

src/views/components/map/index.vue

@@ -5,17 +5,15 @@
 </template>
 
 <script lang='ts'>
-import { Amap } from "/@/components/Map";
+import { Amap } from "/@/components/ReMap";
 export default {
   components: {
     Amap
   },
-  setup(){
+  setup() {
-    return{
+    return {};
-
   }
-  },
+};
-}
 </script>
 
 <style scoped>

src/views/components/seamless-scroll/index.vue

@@ -33,7 +33,7 @@
 import { ref, unref } from "vue";
 import { templateRef } from "@vueuse/core";
 
-import SeamlessScroll from "/@/components/SeamlessScroll";
+import SeamlessScroll from "/@/components/ReSeamlessScroll";
 export default {
   components: {
     SeamlessScroll

src/views/components/selector/index.vue

@@ -6,7 +6,12 @@
           <span>{{item.title}}</span>
         </div>
       </template>
-      <Selector :HsKey="key" :echo="item.echo" @selectedVal="selectedVal" :disabled="item.disabled" />
+      <Selector
+        :HsKey="key"
+        :echo="item.echo"
+        @selectedVal="selectedVal"
+        :disabled="item.disabled"
+      />
       <h4 v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
     </el-card>
   </div>
@@ -14,7 +19,7 @@
 
 <script lang='ts'>
 import { ref } from "vue";
-import Selector from "/@/components/selector";
+import Selector from "/@/components/ReSelector";
 
 export default {
   components: { Selector },
@@ -24,13 +29,13 @@ export default {
       {
         title: "基本使用",
         echo: [],
-        disabled: false,
+        disabled: false
       },
       {
         title: "回显模式",
         echo: [2, 7],
-        disabled: true,
+        disabled: true
-      },
+      }
     ]);
 
     const selectedVal = ({ left, right, whole }) => {
@@ -40,8 +45,8 @@ export default {
     return {
       selectedVal,
       selectRange,
-      dataLists,
+      dataLists
     };
-  },
+  }
 };
 </script>

src/views/components/split-pane/index.vue

@@ -23,9 +23,7 @@
 </template>
 
 <script lang="ts">
-import splitpane, {
+import splitpane, { ContextProps } from "/@/components/ReSplitPane";
-  ContextProps
-} from "../../../components/splitPane/index.vue";
 import { reactive } from "vue";
 export default {
   name: "split",

src/views/flow-chart/index.vue

@@ -19,13 +19,13 @@ import LogicFlow from "@logicflow/core";
 import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
 import "@logicflow/core/dist/style/index.css";
 import "@logicflow/extension/lib/style/index.css";
-import { Control, NodePanel, DataDialog } from "/@/components/FlowChart";
+import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
 
 import {
   toTurboData,
   toLogicflowData
-} from "/@/components/FlowChart/src/adpterForTurbo";
+} from "/@/components/ReFlowChart/src/adpterForTurbo";
-import { BpmnNode } from "/@/components/FlowChart/src/config";
+import { BpmnNode } from "/@/components/ReFlowChart/src/config";
 import demoData from "./dataTurbo.json";
 export default {
   components: { NodePanel, Control, DataDialog },

src/views/login.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { reactive, onBeforeMount } from "vue";
-import info, { ContextProps } from "../components/info/index.vue";
+import info, { ContextProps } from "../components/ReInfo/index.vue";
 import { getVerify, getLogin } from "/@/api/user";
 import { useRouter } from "vue-router";
 import { storageSession } from "/@/utils/storage";

src/views/register.vue

@@ -12,7 +12,7 @@ import {
   onBeforeMount,
   getCurrentInstance
 } from "vue";
-import info, { ContextProps } from "../components/info/index.vue";
+import info, { ContextProps } from "../components/ReInfo/index.vue";
 import { getRegist, getVerify } from "/@/api/user";
 import { useRouter } from "vue-router";
 import { warnMessage, successMessage } from "/@/utils/message";

src/views/welcome.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang='ts'>
-import Flop from "/@/components/Flop";
+import Flop from "/@/components/ReFlop";
 import { ref, computed, onMounted, nextTick } from "vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";

types/global.d.ts

@@ -19,6 +19,8 @@ declare global {
   declare interface Window {
     // Global vue app instance
     __APP__: App<Element>;
+    webkitCancelAnimationFrame: (id?: any) => any;
+    webkitRequestAnimationFrame: (id?: any) => any;
     mozCancelAnimationFrame: (id?: any) => any;
     oCancelAnimationFrame: (id?: any) => any;
     msCancelAnimationFrame: (id?: any) => any;