style(components): canonical code

Author: xiaoxian521

src/components/BreadCrumb/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/Cropper/index.ts

@@ -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/Cropper/src/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/Flop/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/FlowChart/index.ts

@@ -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}
-            alt={props.alt}
-            crossorigin={props.crossorigin}
-            style={unref(getImageStyle)}
+            src={this.props.src}
+            alt={this.props.alt}
+            crossorigin={this.props.crossorigin}
+            style={this.getImageStyle}
           />
         </div>
       </>

src/components/HamBurger/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;