VUE 项目实现大屏展示的响应式

vue项目实现大屏展示 自适应问题

此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用lodash插件实现屏幕移动端自适应。

首先下载lodash插件。
npm i lodash -S

 <template>
  <div class="scree-container">
    <div class="screen-box" :style="'transform:scale('+scaleValue+') translate(-50%,-50%)  translateZ(0)  translate3d(0,0,0)'">
        <slot></slot>
    </div>
  </div>
</template>

<script>
import {debounce} from "lodash";
export default {
  name: "Screen",
  data() {
    return {
      scaleValue:""
    };
  },
  beforeCreate(){
      document.querySelector('body').setAttribute('style','overflow:hidden')
  },
  beforeDestroy(){
      document.querySelector('body').setAttribute('style','overflow:auto;overflow-x:hidden;')
  },
  mounted() {
    this.setScale()
    window.addEventListener('resize',debounce(()=>{
      this.setScale()
    },500))
  },
  methods: {
    setScale(){
      var vw = window.innerWidth / 1920
      var vh = window.innerHeight / 1080
      var scale = vw<vh?vw:vh
      this.scaleValue = scale.toFixed(5)
    }
  }
}
</script>
<style lang="scss" scoped>
.scree-container{
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #000936;
}
.screen-box{
  width: 1920px;
  height: 1080px;
  transform-origin: left top;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 0.3s ease;
  transform:translate(-50%,-50%) translateZ(0) translate3d(0,0,0);
}
</style>

将自己的代码放入slot 中 调整css 样式

高度有问题 就调整

.screen-box{
  width: 1920px;
  height: 1080px; // 高度有问题 将这行代码 注释起来 
  transform-origin: left top;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 0.3s ease;
  transform:translate(-50%,-50%) translateZ(0) translate3d(0,0,0);
}

弹出框点击有蒙版 删除这行代码

// transform: translate(-50%, -50%) translateZ(0) translate3d(0, 0, 0);