style(components): canonical code

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;
-export default defineComponent({
+<script lang="ts">
+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();
-        cropperInstance.getCroppedCanvas().toBlob((blob) => {
+        vm.refs.refCropper.cropper.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) => {
-        cropperInstance = key;
-      });
+      vm = getCurrentInstance();
     });
 
     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(){
-    return{
-
-    }
-  },
-}
+  setup() {
+    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, {
-  ContextProps
-} from "../../../components/splitPane/index.vue";
+import splitpane, { ContextProps } from "/@/components/ReSplitPane";
 import { reactive } from "vue";
 export default {
   name: "split",