fix(deps): 修复自定义指令引起的热更新失效问题

ISSUES CLOSED: #45

src/components/common/ScrollX.vue

@@ -11,7 +11,6 @@
 
     <div
       ref="content"
-      v-resize="refreshIsOverflow"
       class="content"
       :class="{ overflow: isOverflow && showArrow }"
       :style="{
@@ -24,8 +23,7 @@
 </template>
 
 <script setup>
-import { debounce } from '@/utils'
-import { useResize } from '@zclzone/utils'
+import { debounce, useResize } from '@/utils'
 
 defineProps({
   showArrow: {
@@ -78,14 +76,17 @@ const resetTranslateX = debounce(function (wrapperWidth, contentWidth) {
   }
 }, 200)
 
-const observer = ref(null)
+const observers = ref([])
 onMounted(() => {
   refreshIsOverflow()
 
-  observer.value = useResize(document.body, refreshIsOverflow)
+  observers.value.push(useResize(document.body, refreshIsOverflow))
+  observers.value.push(useResize(content.value, refreshIsOverflow))
 })
 onBeforeUnmount(() => {
-  observer.value?.disconnect()
+  observers.value.forEach((item) => {
+    item?.disconnect()
+  })
 })
 
 function handleScroll(x, width) {

src/main.js

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

src/utils/common/common.js

@@ -74,3 +74,17 @@ export function debounce(method, wait, immediate) {
     }
   }
 }
+
+/**
+ *
+ * @param {HTMLElement} el
+ * @param {Function} cb
+ * @return {ResizeObserver}
+ */
+export function useResize(el, cb) {
+  const observer = new ResizeObserver((entries) => {
+    cb(entries[0].contentRect)
+  })
+  observer.observe(el)
+  return observer
+}