vue中大屏可视化项目适配方案

第一步：在data中设置默认宽高及缩放比（正常情况下1k分辨率屏幕大小1920*1080）

style: {
  width: "1920",
  height: "1080",
  transform: "scaleY(1) scaleX(1) translate(-50%, -50%)"
}

第二部：在methods里添加两个方法(设置缩放比例和窗口大小比例)

getScale() {
   const w = window.innerWidth / this.style.width;
   const h = window.innerHeight / this.style.height;
   return {x:w,y:h};
},
setScale() {
   let scale = this.getScale();
   this.style.transform = "scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";
},

第三步：在mounted中调用，并监听浏览器窗口改变事件  

mounted() {
      let that = this;
      that.setScale();
      /*窗口改变事件*/
      $(window).resize(()=> {
        that.setScale();
      });
}

第四步：在css里设置最外层盒子样式

#screen{
    z-index: 100;
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transition: 0.3s;
}

第五步：在最外层盒子标签里设置行内样式,在box里写代码了

<template>
  <div
    id="screen"
    :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`
    }"
  >
   <div class="box"></div>
  </div>
</template>