新增-全界面弹出框组件

frontend/src/hooks/useViewSize.ts

@@ -0,0 +1,37 @@
+import { ref } from 'vue'
+
+export const useViewSize = () => {
+
+    const popupBaseView = ref(null)
+    const viewWidth = ref("0")
+    const viewHeight = ref("0")
+    const unit = 'px'
+
+    /**
+     * 更新宽和高的数据
+     */
+    const updateDimensions = () => {
+        if (popupBaseView.value) {
+            viewWidth.value = popupBaseView.value.offsetWidth + unit
+            viewHeight.value = popupBaseView.value.offsetHeight + unit
+        }
+    }
+
+    /**
+     * 组件挂载完毕，计算宽高，并且给浏览器添加监听器，监听窗口大小改变
+     */
+    onMounted(() => {
+        updateDimensions()
+        window.addEventListener('resize', updateDimensions)
+    })
+
+    /**
+     * 组件视图更新完毕，计算宽高
+     */
+    onUpdated(() => {
+        updateDimensions()
+    })
+
+    return { popupBaseView, viewWidth, viewHeight }
+
+}