feat: 解决屏幕全屏会出现滚动条的问题

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     ecmaVersion: 2020
   },
   rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   }

src/App.vue

@@ -8,7 +8,7 @@
 .app {
   width: 100vw;
   height: 100vh;
-  background-color: #000000;
+  // background-color: #000000;
   overflow: hidden;
 }
 </style>

src/assets/scss/index.scss

@@ -2,9 +2,10 @@
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
+  // position: absolute;
+  // top: 50%;
+  // left: 50%;
+  // transform: translate(-50%, -50%);
   transform-origin: left top;
   .bg {
     width: 100%;

src/assets/scss/style.scss

@@ -20,11 +20,13 @@ body {
   background-color: #f1f1f1;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 }
 
 a {
   color: #343440;
   text-decoration: none;
+  box-sizing: border-box;
 }
 
 .clearfix {

src/utils/index.ts

@@ -1,24 +1,12 @@
-/**
- * @param {Function} fn 防抖函数
- * @param {Number} delay 延迟时间
- */
-export const debounce = (fn: Function, delay: number) => {
-  let timer: number
-  return function (this: any) {
-    let context = this
-    let args = arguments
-    clearTimeout(timer)
-    timer = setTimeout(function () {
-      fn.apply(context, args)
-    }, delay)
-  }
-}
-
 /**
  * @param {date} time 需要转换的时间
  * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ * @returns {String}
  */
-export const formatTime = (time: any , fmt: string): string => {
+export const formatTime = (
+  time: string | number | Date,
+  fmt: string
+): string => {
   if (!time) return ''
   const date = new Date(time)
   const o = {
@@ -28,7 +16,7 @@ export const formatTime = (time: any , fmt: string): string => {
     'm+': date.getMinutes(),
     's+': date.getSeconds(),
     'q+': Math.floor((date.getMonth() + 3) / 3),
-    'S': date.getMilliseconds(),
+    S: date.getMilliseconds(),
   }
   if (/(y+)/.test(fmt))
     fmt = fmt.replace(
@@ -39,6 +27,7 @@ export const formatTime = (time: any , fmt: string): string => {
     if (new RegExp('(' + k + ')').test(fmt)) {
       fmt = fmt.replace(
         RegExp.$1,
+        // @ts-ignore: Unreachable code error
         RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
       )
     }

src/utils/resizeMixins.ts

@@ -1,32 +0,0 @@
-// 混入代码 resize-mixins.js
-import { debounce } from '@/utils';
-const resizeChartMethod = '$__resizeChartMethod';
-
-export default {
-  data() { 
-    // 在组件内部将图表 init 的引用映射到 chart 属性上
-    return {
-      chart: null,
-    };
-  },
-  created() {
-    window.addEventListener('resize', this[resizeChartMethod], false);
-  },
-  activated() {
-    // 防止 keep-alive 之后图表变形
-    if (this.chart) {
-      this.chart.resize()
-    }
-  },
-  beforeDestroy() {
-    window.removeEventListener('reisze', this[resizeChartMethod]);
-  },
-  methods: {
-    // 防抖函数来控制 resize 的频率
-    [resizeChartMethod]: debounce(function() {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    }, 300),
-  },
-};

src/utils/useDraw.ts

@@ -16,7 +16,6 @@ export default function useIndex() {
 
   // * 需保持的比例（默认1.77778）
   const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
-
   const calcRate = () => {
     // 当前宽高比
     const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
@@ -25,12 +24,14 @@ export default function useIndex() {
         // 表示更宽
         scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
         scale.height = (window.innerHeight / baseHeight).toFixed(5)
-        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        // appRef.value.style.transform = `scale(${scale.width}, ${scale.height} translate(-50%, -50%)`
+        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}`
       } else {
         // 表示更高
         scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
         scale.width = (window.innerWidth / baseWidth).toFixed(5)
-        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        // appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        appRef.value.style.transform = `scale(${scale.width}, ${scale.height})`
       }
     }
   }
@@ -39,7 +40,7 @@ export default function useIndex() {
     clearTimeout(timer.value)
     timer.value = setTimeout(() => {
       calcRate()
-    }, 100)
+    }, 200)
   }
 
   // 改变窗口大小重新绘制

src/views/index.vue

@@ -136,6 +136,7 @@ export default defineComponent({
       windowDraw()
       calcRate()
     })
+
     onBeforeUnmount(() => {
       clearInterval(timeInfo.setInterval)
     })

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "strict": true,
+    "strict": false,
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",