perf: 优化ScrollX

package.json

@@ -17,6 +17,7 @@
     "@vueuse/core": "^9.13.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "@zclzone/utils": "^0.0.8",
     "axios": "^1.3.4",
     "dayjs": "^1.11.7",
     "lodash-es": "^4.17.21",

pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   '@vueuse/core': ^9.13.0
   '@wangeditor/editor': ^5.1.23
   '@wangeditor/editor-for-vue': ^5.1.12
+  '@zclzone/utils': ^0.0.8
   axios: ^1.3.4
   chalk: ^5.2.0
   commitizen: ^4.3.0
@@ -51,6 +52,7 @@ dependencies:
   '@vueuse/core': 9.13.0_vue@3.2.47
   '@wangeditor/editor': 5.1.23
   '@wangeditor/editor-for-vue': 5.1.12_77ywgcaevzgjoxs6yixvgo4fve
+  '@zclzone/utils': 0.0.8
   axios: 1.3.4
   dayjs: 1.11.7
   lodash-es: 4.17.21
@@ -1369,6 +1371,12 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
+  /@zclzone/utils/0.0.8:
+    resolution: {integrity: sha512-juDnfLV7YIpuNsfRhBcK3BufVX1rl0kLHZwOEE61I7nSmL1aze2x498QU8a4AjjnAd3389qBzGsNxkrp8j+6Ag==}
+    dependencies:
+      crypto-js: 4.1.1
+    dev: false
+
   /JSONStream/1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -2117,6 +2125,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypto-js/4.1.1:
+    resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
+    dev: false
+
   /css-render/0.15.11:
     resolution: {integrity: sha512-hnLrHPUndVUTF5nmNPRey6hpixK02IPUGdEsm2xRjvJuewToyrVFx9Nmai8rgfVzhTFo5SJVh2PHAtzaIV8JKw==}
     dependencies:

src/components/common/ScrollX.vue

@@ -11,6 +11,7 @@
 
     <div
       ref="content"
+      v-resize="refreshIsOverflow"
       class="content"
       :class="{ overflow: isOverflow && showArrow }"
       :style="{
@@ -24,6 +25,7 @@
 
 <script setup>
 import { debounce } from '@/utils'
+import { useResize } from '@zclzone/utils'
 
 defineProps({
   showArrow: {
@@ -76,17 +78,14 @@ const resetTranslateX = debounce(function (wrapperWidth, contentWidth) {
   }
 }, 200)
 
-const observer = new MutationObserver(refreshIsOverflow)
+const observer = ref(null)
 onMounted(() => {
   refreshIsOverflow()
 
-  window.addEventListener('resize', refreshIsOverflow)
+  observer.value = useResize(document.body, refreshIsOverflow)
-  // 监听内容宽度刷新是否超出
-  observer.observe(content.value, { childList: true })
 })
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', refreshIsOverflow)
+  observer.value?.disconnect()
-  observer.disconnect()
 })
 
 function handleScroll(x, width) {

src/main.js

@@ -8,6 +8,7 @@ import { createApp } from 'vue'
 import { setupRouter } from '@/router'
 import { setupStore } from '@/store'
 import App from './App.vue'
+import { useResize } from '@zclzone/utils'
 
 async function setupApp() {
   const app = createApp(App)
@@ -16,6 +17,7 @@ async function setupApp() {
 
   await setupRouter(app)
 
+  app.use(useResize)
   app.mount('#app')
 }