vue 屏幕自适应及全屏放大缩小

1.

2.data中

data(){
    return{
        screenWidth: document.documentElement.clientWidth,//屏幕宽度
        screenHeight: document.documentElement.clientHeight,//屏幕高度
        scaleNum: '',
        flag: true, //全屏
    }
}

3.js

//屏幕
mounted(){
    let self = this
    self.scale()
    window.onresize = function() {
      self.screenWidth = document.documentElement.clientWidth
      self.screenHeight = document.documentElement.clientHeight
    }
  },
methods:{
    //全屏显示
    maxScreen() {
      let docElm = document.documentElement
      if (this.flag) {
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen()
        }
        this.flag = !this.flag
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
        this.flag = !this.flag
      }
    },
    //自适应
    scale() {
        let vw = 1920
        let vh = 1080
        vw = this.screenWidth / vw
        vh = this.screenHeight / vh
        let Vm = document.getElementById('main')
        let scale
        if (vw > vh) {
          scale = vh
        } else {
          scale = vw
        }
        this.scaleNum = scale
        Vm.style.transform = 'scale(' + scale + ')'
      },
}
watch: {
      screenWidth: function() {
        this.scale()
      },
      screenHeight: function() {
        let nowHeight = this.scaleNum * 1080
        if (this.screenHeight <= nowHeight) {
          // this.flag = true
        }
        this.scale()
      }
    }

4.样式

#screen-content{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #EBEBEB;
    overflow-y: auto;
    overflow-x: hidden;
    &.fix {
      position: fixed;
      z-index: 99;
    }
  }
  #main{
    width: 1920px;
    height: 1080px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
    transform-origin: top center;
  }