【前端可视化】大屏scale适配vue3 hooks封装

原创

于 2023-04-28 10:50:00 发布 · 654 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #css3 #css

该代码示例展示了如何在Vue应用中使用自定义hook`useScalePage`实现页面的动态缩放，以适应不同尺寸的大屏幕。它基于窗口大小改变事件调整页面比例，确保宽高比，并在超宽屏情况下优化布局。

body样式

body {
  position: relative;
  width: 1920px;
  height: 1080px;
  box-sizing: border-box;

  // scale 缩放中心 左上角
  transform-origin: left top;
}

useScalePage.js

import { onMounted, onUnmounted } from 'vue';
import _ from 'lodash';

/**
  大屏适配的 hooks
 */
export default function useScalePage(option) {
  const resizeFunc = _.throttle(function () {
    triggerScale(); // 动画缩放网页
  }, 100);

  onMounted(() => {
    triggerScale(); // 动画缩放网页
    window.addEventListener('resize', resizeFunc);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', resizeFunc); // 释放
  });

  // 大屏的适配
  function triggerScale() {
    // 1.设计稿的尺寸
    let targetX = option.targetX || 1920;
    let targetY = option.targetY || 1080;
    let targe