vue前端可视化大屏页面适配方案

参考了其他博主的代码,但发现会有滚动条,并且居中的位置不太对,所以改了一下css,修复了这些问题,直接上代码

javascript 复制代码
<template>
<div class="ScaleBoxA">
    <div
      class="ScaleBox"
      ref="ScaleBox"
      :style="{
        width: width + 'px',
        height: height + 'px',
      }"
    >
         <!--  内容  -->
     </div>
</div>
</template>
<script>
export default {
   name: 'index',
   data() {
    return {
      scale: 0,
      width: 1920,
      height: 1080,
     }
    }, 
   methods: {
    getScale() {
      const { width, height } = this
      const wh = window.innerHeight / height
      const ww = window.innerWidth / width
      return ww < wh ? ww : wh
    },
    setScale() {
      this.scale = this.getScale()
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
      }
    },
    debounce(fn, delay) {
      const delays = delay || 500
      let timer
      return function () {
        const th = this
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(function () {
          timer = null
          fn.apply(th, args)
        }, delays)
      }
    },
  },
  mounted() {
    this.setScale()
    window.addEventListener('resize', this.debounce(this.setScale))
  },
}
<style lang="scss" scoped>
#ScaleBox {
  --scale: 1;
}
.ScaleBoxA {
  top: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ScaleBox {
  transform: scale(var(--scale));
  display: flex;
  flex-direction: column;
  transform-origin: 960px 540px;
  transition: 0.3s;
  z-index: 999;
}
</style>
相关推荐
摸鱼的春哥7 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
郝学胜-神的一滴7 分钟前
Effective Modern C++ 条款26:避免在通用引用上重载
开发语言·c++·程序人生
草莓熊Lotso10 分钟前
【C++】递归与迭代:两种编程范式的对比与实践
c语言·开发语言·c++·经验分享·笔记·其他
Aczone281 小时前
硬件(六)arm指令
开发语言·汇编·arm开发·嵌入式硬件·算法
YA3332 小时前
java设计模式二、工厂
java·开发语言·设计模式
逐雨~2 小时前
9.8C++作业
开发语言·c++
我爱挣钱我也要早睡!3 小时前
Java 复习笔记
java·开发语言·笔记
Yang-Never4 小时前
Kotlin协程 -> Job.join() 完整流程图与核心源码分析
android·开发语言·kotlin·android studio
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react