From ba2ec8aca22caa8e64c01e6f62c3db132d896902 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Fri, 9 Jun 2023 17:27:05 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8`vueuse`=E7=9A=84?= =?UTF-8?q?`useResizeObserver`=E5=87=BD=E6=95=B0=E6=9B=BF=E6=8D=A2`v-resiz?= =?UTF-8?q?e`=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8C=87=E4=BB=A4=EF=BC=8C?= =?UTF-8?q?=E4=BB=8E=E6=B5=8B=E8=AF=95=E5=90=8E=E7=9A=84=E8=A1=A8=E7=8E=B0?= =?UTF-8?q?=E6=9D=A5=E7=9C=8B=EF=BC=8C=E6=80=A7=E8=83=BD=E4=BC=9A=E6=9B=B4?= =?UTF-8?q?=E5=A5=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/optimize.ts | 1 - package.json | 2 -- pnpm-lock.yaml | 18 ---------------- src/directives/elResizeDetector/index.ts | 27 ------------------------ src/directives/index.ts | 1 - src/layout/index.vue | 12 ++++++----- 6 files changed, 7 insertions(+), 54 deletions(-) delete mode 100644 src/directives/elResizeDetector/index.ts diff --git a/build/optimize.ts b/build/optimize.ts index d7c2a696d..0ae3dc7fc 100644 --- a/build/optimize.ts +++ b/build/optimize.ts @@ -33,7 +33,6 @@ const include = [ "@howdyjs/mouse-menu", "@logicflow/extension", "vue-virtual-scroller", - "element-resize-detector", "@amap/amap-jsapi-loader", "el-table-infinite-scroll", "vue-waterfall-plugin-next", diff --git a/package.json b/package.json index 3bb356ab5..720074e7e 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,6 @@ "echarts": "^5.4.2", "el-table-infinite-scroll": "^3.0.1", "element-plus": "^2.3.5", - "element-resize-detector": "^1.2.4", "intro.js": "^7.0.1", "js-cookie": "^3.0.5", "jsbarcode": "^3.11.5", @@ -88,7 +87,6 @@ "@iconify/vue": "^4.1.1", "@intlify/unplugin-vue-i18n": "^0.10.0", "@pureadmin/theme": "^3.0.0", - "@types/element-resize-detector": "1.1.3", "@types/intro.js": "^5.1.1", "@types/js-cookie": "^3.0.3", "@types/mockjs": "^1.0.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a9136aee2..fca6014a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,7 +15,6 @@ specifiers: '@pureadmin/table': ^2.3.2 '@pureadmin/theme': ^3.0.0 '@pureadmin/utils': ^1.9.2 - '@types/element-resize-detector': 1.1.3 '@types/intro.js': ^5.1.1 '@types/js-cookie': ^3.0.3 '@types/mockjs': ^1.0.7 @@ -45,7 +44,6 @@ specifiers: echarts: ^5.4.2 el-table-infinite-scroll: ^3.0.1 element-plus: ^2.3.5 - element-resize-detector: ^1.2.4 eslint: ^8.42.0 eslint-plugin-prettier: ^4.2.1 eslint-plugin-vue: ^9.14.1 @@ -136,7 +134,6 @@ dependencies: echarts: 5.4.2 el-table-infinite-scroll: 3.0.1 element-plus: 2.3.6_vue@3.3.4 - element-resize-detector: 1.2.4 intro.js: 7.0.1 js-cookie: 3.0.5 jsbarcode: 3.11.5 @@ -176,7 +173,6 @@ devDependencies: '@iconify/vue': 4.1.1_vue@3.3.4 '@intlify/unplugin-vue-i18n': 0.10.1_vue-i18n@9.2.2 '@pureadmin/theme': 3.0.0 - '@types/element-resize-detector': 1.1.3 '@types/intro.js': 5.1.1 '@types/js-cookie': 3.0.3 '@types/mockjs': 1.0.7 @@ -1787,10 +1783,6 @@ packages: '@babel/types': 7.22.4 dev: false - /@types/element-resize-detector/1.1.3: - resolution: {integrity: sha512-rqmeHxzNMPar/3IbdQRm+mydv8KlEXUtcp5M47rbZUEjslTjg+bT5+OXCknTCIy1AfvNR0Kio44iMY2zUH65CQ==} - dev: true - /@types/estree/1.0.1: resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==} @@ -2874,10 +2866,6 @@ packages: resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} dev: true - /batch-processor/1.0.0: - resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==} - dev: false - /binary-extensions/2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} @@ -3840,12 +3828,6 @@ packages: - '@vue/composition-api' dev: false - /element-resize-detector/1.2.4: - resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==} - dependencies: - batch-processor: 1.0.0 - dev: false - /emittery/0.8.1: resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==} engines: {node: '>=10'} diff --git a/src/directives/elResizeDetector/index.ts b/src/directives/elResizeDetector/index.ts deleted file mode 100644 index af089be7d..000000000 --- a/src/directives/elResizeDetector/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Directive, type DirectiveBinding, type VNode } 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?: VNode) { - 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); - } -}; diff --git a/src/directives/index.ts b/src/directives/index.ts index d6d6592d8..97ccf7649 100644 --- a/src/directives/index.ts +++ b/src/directives/index.ts @@ -1,2 +1 @@ export * from "./auth"; -export * from "./elResizeDetector"; diff --git a/src/layout/index.vue b/src/layout/index.vue index 9103f4b6f..e5d8b1de0 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -3,14 +3,15 @@ import "animate.css"; // 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标 import "@/components/ReIcon/src/offlineIcon"; import { setType } from "./types"; -import { emitter } from "@/utils/mitt"; import { useLayout } from "./hooks/useLayout"; +import { useResizeObserver } from "@vueuse/core"; import { useAppStoreHook } from "@/store/modules/app"; import { useSettingStoreHook } from "@/store/modules/settings"; import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { h, + ref, reactive, computed, onMounted, @@ -26,6 +27,7 @@ import Vertical from "./components/sidebar/vertical.vue"; import Horizontal from "./components/sidebar/horizontal.vue"; import backTop from "@/assets/svg/back_top.svg?component"; +const appWrapperRef = ref(); const { isDark } = useDark(); const { layout } = useLayout(); const isMobile = deviceDetection(); @@ -78,10 +80,10 @@ function toggle(device: string, bool: boolean) { // 判断是否可自动关闭菜单栏 let isAutoCloseSidebar = true; -// 监听容器 -emitter.on("resize", ({ detail }) => { +useResizeObserver(appWrapperRef, entries => { if (isMobile) return; - const { width } = detail; + const entry = entries[0]; + const { width } = entry.contentRect; width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout); /** width app-wrapper类容器宽度 * 0 < width <= 760 隐藏侧边栏 @@ -147,7 +149,7 @@ const layoutHeader = defineComponent({