feat(directive): add custom directive v-resize

src/directives/elResizeDetector/index.ts

@@ -0,0 +1,28 @@
+import { Directive } from "vue";
+import type { DirectiveBinding } from "vue";
+import elementResizeDetectorMaker from "element-resize-detector";
+import type { Erd } from "element-resize-detector";
+import { emitter } from "/@/utils/mitt";
+
+const erd: Erd = elementResizeDetectorMaker({
+  strategy: "scroll"
+});
+
+export const resize: Directive = {
+  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: any) {
+    erd.listenTo(el, elem => {
+      const width = elem.offsetWidth;
+      const height = elem.offsetHeight;
+      if (binding?.instance) {
+        emitter.emit("resize", { detail: { width, height } });
+      } else {
+        vnode.el.dispatchEvent(
+          new CustomEvent("resize", { detail: { width, height } })
+        );
+      }
+    });
+  },
+  unmounted(el: HTMLElement) {
+    erd.uninstall(el);
+  }
+};

src/directives/index.ts

@@ -1 +1,2 @@
 export * from "./permission";
+export * from "./elResizeDetector";

src/directives/permission/index.ts

@@ -1,8 +1,9 @@
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { Directive } from "vue";
+import type { DirectiveBinding } from "vue";
 
 export const auth: Directive = {
-  mounted(el, binding) {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
     const { value } = binding;
     if (value) {
       const authRoles = value;

src/layout/components/Navbar.vue

@@ -89,8 +89,8 @@ export default defineComponent({
     }
   },
   setup() {
-    // eslint-disable-next-line no-unused-vars
-    let vm: any;
+    const instance =
+      getCurrentInstance().appContext.config.globalProperties.$storage;
     const pureApp = useAppStoreHook();
     const router = useRouter();
     const route = useRoute();
@@ -101,13 +101,13 @@ export default defineComponent({
 
     // 国际化语言切换
     const toggleLang = (): void => {
-      switch (vm.locale.locale) {
+      switch (instance.locale.locale) {
         case "zh":
-          vm.locale = { locale: "en" };
+          instance.locale = { locale: "en" };
           locale.value = "en";
           break;
         case "en":
-          vm.locale = { locale: "zh" };
+          instance.locale = { locale: "zh" };
           locale.value = "zh";
           break;
       }
@@ -136,8 +136,6 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      vm = getCurrentInstance().appContext.config.globalProperties.$storage;
       document
         .querySelector(".el-dropdown__popper")
         ?.setAttribute("class", "resetTop");

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

@@ -32,6 +32,7 @@
 
 <script lang="ts">
 import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
+
 export default {
   name: "reCountTo",
   components: {

src/views/components/cropping/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { ref, onBeforeMount, nextTick, getCurrentInstance } from "vue";
+import { ref, nextTick, getCurrentInstance } from "vue";
 import Cropper from "/@/components/ReCropper";
 import img from "./picture.jpeg";