chore: structure change

src/components/BreadCrumb/index.ts

@@ -0,0 +1,10 @@
+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/BreadCrumb/src/BreadCrumb.vue

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

src/components/Cropper/index.ts

@@ -0,0 +1,10 @@
+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/Cropper.tsx

@@ -0,0 +1,127 @@
+import type { CSSProperties } from 'vue'
+
+import { defineComponent, onBeforeMount, nextTick, ref, unref, computed, PropType, getCurrentInstance } from 'vue'
+
+import { useAttrs } from '/@/utils/useAttrs'
+import { emitter } from '/@/utils/mitt'
+
+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,
+    },
+    width: {
+      type: [String, Number],
+      default: '',
+    },
+    height: {
+      type: [String, Number],
+      default: '360px',
+    },
+    crossorigin: {
+      type: String || Object,
+      default: undefined,
+    },
+    imageStyle: {
+      type: Object as PropType<CSSProperties>,
+      default: {},
+    },
+    options: {
+      type: Object as PropType<Options>,
+      default: {},
+    }
+  },
+  setup(props) {
+    let vm: any
+    const cropper: any = ref<Nullable<Cropper>>(null)
+
+    const isReady = ref(false)
+
+    const getImageStyle = computed(
+      (): CSSProperties => {
+        return {
+          height: props.height,
+          width: props.width,
+          maxWidth: '100%',
+          ...props.imageStyle,
+        }
+      }
+    )
+
+    const getWrapperStyle = computed(
+      (): CSSProperties => {
+        const { height, width } = props
+        return { width: `${width}`.replace(/px/, '') + 'px', height: `${height}`.replace(/px/, '') + 'px' }
+      }
+    )
+
+    async function init() {
+      const imgEl = vm.refs.imgElRef
+      if (!imgEl) {
+        return
+      }
+      cropper.value = new Cropper(imgEl, {
+        ...defaultOptions,
+        ready: () => {
+          isReady.value = true
+        },
+        ...props.options,
+      })
+    }
+
+    onBeforeMount(() => {
+      vm = getCurrentInstance()
+      nextTick(() => {
+        init()
+        // tsx语法返回渲染模板，外部组件想调用内部方法或者获取setup里面的实例，暂时想到的办法是通过公共事件
+        emitter.emit("cropperInstance", unref(cropper))
+      })
+    })
+
+    return () => (
+      <>
+        <div class={useAttrs({ excludeListeners: true, excludeKeys: ['class'] })} style={unref(getWrapperStyle)}>
+          <img
+            ref="imgElRef"
+            src={props.src}
+            alt={props.alt}
+            crossorigin={props.crossorigin}
+            style={unref(getImageStyle)}
+          />
+        </div>
+      </>
+    )
+  },
+})

src/components/Cropper/src/index.ts

@@ -1,3 +1,4 @@
+/**
 <template>
   <div :class="$attrs.class" :style="getWrapperStyle">
     <img
@@ -43,6 +44,7 @@
     rotatable: true,
   };
   export default defineComponent({
+    name: "Cropper",
     props: {
       src: {
         type: String,
@@ -126,3 +128,4 @@
     },
   });
 </script>
+ */

src/components/Flop/index.ts

@@ -0,0 +1,10 @@
+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/Flop/src/index.vue

@@ -13,8 +13,9 @@
 
 <script lang='ts'>
 import { ref, onBeforeMount, getCurrentInstance, nextTick } from "vue";
-import flippers from "./flipper.vue";
+import flippers from "./Flipper.vue";
 export default {
+  name: "Flop",
   components: {
     flippers,
   },

src/components/HamBurger/index.ts

@@ -0,0 +1,10 @@
+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/HamBurger/src/HamBurger.vue

@@ -18,7 +18,7 @@
 <script>
 import { defineComponent } from "vue";
 export default defineComponent({
-  name: "hamBurger",
+  name: "HamBurger",
   props: {
     isActive: {
       type: Boolean,

src/components/Map/index.ts

@@ -0,0 +1,20 @@
+import { App } from "vue"
+import amap from "./src/Amap.vue"
+import baiduMap from "./src/BaiduMap.vue"
+
+export const Amap = Object.assign(amap, {
+  install(app: App) {
+    app.component(amap.name, amap)
+  }
+})
+
+export const BaiduMap = Object.assign(baiduMap, {
+  install(app: App) {
+    app.component(baiduMap.name, baiduMap)
+  }
+})
+
+export default {
+  Amap,
+  BaiduMap
+}

src/components/Map/src/Amap.vue

@@ -19,9 +19,10 @@ import {
   getCurrentInstance,
 } from "vue";
 
-import { mapJson } from "../../api/mock";
+import { mapJson } from "/@/api/mock";
+import { deviceDetection } from "/@/utils/deviceDetection"
+
 import greenCar from "/@/assets/green.png";
-import { deviceDetection } from "../../utils/deviceDetection"
 
 let MarkerCluster = null;
 
@@ -40,6 +41,7 @@ export interface mapInter {
 }
 
 export default defineComponent({
+  name: "Amap",
   setup() {
     let vm: any;
     let map: MapConfigureInter;

src/components/Map/src/BaiduMap.vue

@@ -6,6 +6,7 @@
 
 <script lang='ts'>
 export default {
+  name: "BaiduMap",
   setup(){
     return{
 

src/components/countTo/index.ts

@@ -1,5 +1,5 @@
 import { App } from "vue"
-import countTo from "./src/countTo"
+import countTo from "./src/CountTo"
 
 export const CountTo = Object.assign(countTo, {
   install(app: App) {

src/components/countTo/src/countTo.tsx

@@ -25,7 +25,7 @@ export default defineComponent({
       timestamp: number | null
       rAF: any
       remaining: number | null
-      color: any
+      color: string
       fontSize: string
     }>({
       localStartVal: props.startVal,

src/components/countTo/src/props.ts

@@ -13,14 +13,8 @@ export const countToProps = {
       return value >= 0
     },
   },
-  color: {
-    type: String as PropType<string>,
-    require: false
-  },
-  fontSize: {
-    type: String as PropType<string>,
-    require: false
-  },
+  color: propTypes.string.def(),
+  fontSize: propTypes.string.def(),
   decimal: propTypes.string.def('.'),
   separator: propTypes.string.def(','),
   prefix: propTypes.string.def(''),

src/components/info/index.vue

@@ -57,7 +57,7 @@ import {
   watch,
   nextTick,
 } from "vue";
-import { storageSession } from "../../utils/storage";
+import { storageSession } from "/@/utils/storage";
 
 export interface ContextProps {
   userName: string;
@@ -71,6 +71,7 @@ export interface ContextProps {
 import { useRouter, useRoute } from "vue-router";
 
 export default defineComponent({
+  name: "Info",
   props: {
     ruleForm: {
       type: Object as PropType<ContextProps>,

src/components/selector/index.ts

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

src/components/selector/src/index.ts

@@ -48,7 +48,7 @@ let selectedList = [];
 let overList = [];
 
 export default defineComponent({
-  name: "HsSelector",
+  name: "Selector",
   props: {
     HsKey: {
       type: Number || String,

src/components/selector/src/selector.tsx

@@ -22,7 +22,7 @@ let overList = []
 let selectedList = []
 
 export default defineComponent({
-  name: "HsSelector",
+  name: "Selector",
   props: {
     HsKey: {
       type: Number || String,

src/components/splitPane/index.vue

@@ -36,11 +36,8 @@
 import {
   defineComponent,
   ref,
-  getCurrentInstance,
   computed,
-  watch,
   PropType,
-  onBeforeMount,
 } from "vue";
 import resizer from "./resizer.vue";