vue放大缩小视图窗口按钮

第一步：在template中写

 <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
      <i class="el-icon-rank"></i>
</el-tooltip>

 第二步：在script中定义

data() {
    return {
      fullscreen: false,

 　　　　WindowScreenHeight: null

    }
  },

第三步：

created() {
    this.WindowScreenHeight = window.screen.height
    let WindowBrowerHeight = window.innerHeight
    if (this.WindowScreenHeight == WindowBrowerHeight) {
      this.fullscreen = true
    } else {
      this.fullscreen = false
    }
  },

第四步：

 mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', () => {
        let WindowBrowerHeight = window.innerHeight
        if (this.WindowScreenHeight == WindowBrowerHeight) {
          this.fullscreen = true
        } else {
          this.fullscreen = false
        }
      })
    })
  },

第五部：

 // 全屏事件
    handleFullScreen() {
      let element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      // this.fullscreen = !this.fullscreen
    },

这样就可以实现了，前提安装vue和element-ui