feat: 新增页面预览方式

src/hooks/usePreviewScale.hook.ts

@@ -1,44 +1,47 @@
-import { ref } from 'vue'
 import throttle from 'lodash/throttle'
 
-// * 屏幕缩放适配
-export const usePreviewScale = (
+// 拆出来是为了更好的分离单独复用
+
+// * 屏幕缩放适配（两边留白）
+export const usePreviewFitScale = (
   width: number,
   height: number,
-  scaleDom: HTMLElement | null
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
 ) => {
-  // * 指向最外层容器（没生效不知道为啥）
-  const appRef = ref()
-
-  // * 屏幕尺寸（px）
+  // * 画布尺寸（px）
   const baseWidth = width
   const baseHeight = height
 
   // * 默认缩放值
   const scale = {
-    width: '1',
-    height: '1',
+    width: 1,
+    height: 1,
   }
 
   // * 需保持的比例
   const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
   const calcRate = () => {
-    // 当前宽高比
+    // 当前屏幕宽高比
     const currentRate = parseFloat(
       (window.innerWidth / window.innerHeight).toFixed(5)
     )
     if (scaleDom) {
       if (currentRate > baseProportion) {
         // 表示更宽
-        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
-        scale.height = (window.innerHeight / baseHeight).toFixed(5)
+        scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
+        scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
         scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
       } else {
         // 表示更高
-        scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
-        scale.width = (window.innerWidth / baseWidth).toFixed(5)
+        scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
+        scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
         scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
       }
+      if (callback) callback(scale)
     }
   }
 
@@ -57,9 +60,159 @@ export const usePreviewScale = (
   }
 
   return {
-    appRef,
     calcRate,
     windowResize,
     unWindowResize,
   }
 }
+
+// *  X轴撑满，Y轴滚动条
+export const usePreviewScrollYScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
+) => {
+  // * 画布尺寸（px）
+  const baseWidth = width
+  const baseHeight = height
+
+  // * 默认缩放值
+  const scale = {
+    width: 1,
+    height: 1,
+  }
+
+  // * 需保持的比例
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    if (scaleDom) {
+      scale.height = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
+      scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5))
+      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      if (callback) callback(scale)
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 改变窗口大小重新绘制
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}
+
+// *  Y轴撑满，X轴滚动条
+export const usePreviewScrollXScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
+) => {
+  // * 画布尺寸（px）
+  const baseWidth = width
+  const baseHeight = height
+
+  // * 默认缩放值
+  const scale = {
+    height: 1,
+    width: 1,
+  }
+
+  // * 需保持的比例
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+  const calcRate = () => {
+    if (scaleDom) {
+      scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
+      scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5))
+      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      if (callback) callback(scale)
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 改变窗口大小重新绘制
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}
+
+// * 变形内容，宽高铺满
+export const usePreviewFullScale = (
+  width: number,
+  height: number,
+  scaleDom: HTMLElement | null,
+  callback?: (scale: {
+    width: number;
+    height: number;
+  }) => void
+) => {
+
+  // * 默认缩放值
+  const scale = {
+    width: 1,
+    height: 1,
+  }
+
+  const calcRate = () => {
+    if (scaleDom) {
+      scale.width = parseFloat((window.innerWidth / width).toFixed(5))
+      scale.height = parseFloat((window.innerHeight / height).toFixed(5))
+      scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`
+      if (callback) callback(scale)
+    }
+  }
+
+  const resize = throttle(() => {
+    calcRate()
+  }, 200)
+
+  // * 改变窗口大小重新绘制
+  const windowResize = () => {
+    window.addEventListener('resize', resize)
+  }
+
+  // * 改变窗口大小重新绘制
+  const unWindowResize = () => {
+    window.removeEventListener('resize', resize)
+  }
+
+  return {
+    calcRate,
+    windowResize,
+    unWindowResize,
+  }
+}