新增-全界面弹出框组件

frontend/src/hooks/useTime.ts

@@ -1,38 +1,38 @@
-import { ref } from "vue";
+import { ref } from 'vue'
 
 /**
  * @description 获取本地时间
  */
 export const useTime = () => {
-  const year = ref(0); // 年份
-  const month = ref(0); // 月份
-  const week = ref(""); // 星期几
-  const day = ref(0); // 天数
-  const hour = ref<number | string>(0); // 小时
-  const minute = ref<number | string>(0); // 分钟
-  const second = ref<number | string>(0); // 秒
-  const nowTime = ref<string>(""); // 当前时间
+    const year = ref(0) // 年份
+    const month = ref(0) // 月份
+    const week = ref('') // 星期几
+    const day = ref(0) // 天数
+    const hour = ref<number | string>(0) // 小时
+    const minute = ref<number | string>(0) // 分钟
+    const second = ref<number | string>(0) // 秒
+    const nowTime = ref<string>('') // 当前时间
 
-  // 更新时间
-  const updateTime = () => {
-    const date = new Date();
-    year.value = date.getFullYear();
-    month.value = date.getMonth() + 1;
-    week.value = "日一二三四五六".charAt(date.getDay());
-    day.value = date.getDate();
-    hour.value =
-      (date.getHours() + "")?.padStart(2, "0") ||
-      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours());
-    minute.value =
-      (date.getMinutes() + "")?.padStart(2, "0") ||
-      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes());
-    second.value =
-      (date.getSeconds() + "")?.padStart(2, "0") ||
-      new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds());
-    nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}`;
-  };
+    // 更新时间
+    const updateTime = () => {
+        const date = new Date()
+        year.value = date.getFullYear()
+        month.value = date.getMonth() + 1
+        week.value = '日一二三四五六'.charAt(date.getDay())
+        day.value = date.getDate()
+        hour.value =
+            (date.getHours() + '')?.padStart(2, '0') ||
+            new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getHours())
+        minute.value =
+            (date.getMinutes() + '')?.padStart(2, '0') ||
+            new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getMinutes())
+        second.value =
+            (date.getSeconds() + '')?.padStart(2, '0') ||
+            new Intl.NumberFormat(undefined, { minimumIntegerDigits: 2 }).format(date.getSeconds())
+        nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}`
+    }
 
-  updateTime();
+    updateTime()
 
-  return { year, month, day, hour, minute, second, week, nowTime };
-};
+    return { year, month, day, hour, minute, second, week, nowTime }
+}

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 }
+
+}