perf: 优化ScrollX

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.observe(content.value, { childList: true })
+  observer.value = useResize(document.body, refreshIsOverflow)
 })
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', refreshIsOverflow)
-  observer.disconnect()
+  observer.value?.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')
 }