v3-lab-web/src/App.vue

<template>
    <div id="app" :class="$route.path == '/codeHtml'?'codeHtmlPage':''"
         :style="$route.path == '/codeHtml'?'width:'+innerWidth+'px!important;height:'+innerHeight+'px!important;':''">
      <router-view/>
    </div>
</template>

<script>
  import { MessageBox } from 'element-ui'
  export default  {
    name:  'App',
    data(){
      return{
        innerHeight:window.innerHeight,
        innerWidth:window.innerWidth,
        timer:null,
      }
    },
    metaInfo() {
      return {
        title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
        titleTemplate: title => {
          return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
        },
      }
    },
    mounted(){
      this.banZoom();
      //根据当前浏览器宽度与额定尺寸计算transform缩放值
      document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
      //根据当前浏览器宽度与额定尺寸计算当前浏览器可观看尺寸高度
      document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
      //当尺寸改变后从新计算
      window.onresize = () => {
        return (() => {
          document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
          document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';

        })();
      };
      // this.inspectRenewal();
    },
    methods:{
      //缩放禁用
      banZoom(){
        // 禁止通过 ctrl + +/- 和  ctrl + 滚轮 对页面进行缩放
        document.addEventListener('keydown', function (event) {
          if ((event.ctrlKey === true || event.metaKey === true) &&
            (event.which === 61 || event.which === 107 ||
              event.which === 173 || event.which === 109 ||
              event.which === 187 || event.which === 189)) {
            event.preventDefault()
          }
        }, false)
        // Chrome IE 360
        window.addEventListener('mousewheel', function (event) {
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault()
          }
        }, {
          passive: false
        })
        // firefox
        window.addEventListener('DOMMouseScroll', function (event) {
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault()
          }
        }, {
          passive: false
        })
      },
      //更新检查
      inspectRenewal(){
        const self = this;
        const intervalTime = 300000;
        checkForUpdates();
        self.timer = window.setInterval(checkForUpdates, intervalTime);
        async function checkForUpdates() {
          let xhr = new XMLHttpRequest();
          xhr.open('GET', 'version.txt', true); // 替换为你要读取的txt文件路径
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
              let version = xhr.responseText;
              if (version !== process.env.VUE_APP_RENEWAL_ENCODING){
                MessageBox.confirm('发现新版本,是否立即刷新页面?', '系统提示', {
                    confirmButtonText: '确定',
                    showCancelButton:true,
                    closeOnClickModal:false,
                    cancelButtonText: '取消',
                    type: 'warning'
                  }
                ).then(() => {
                  clearInterval(self.timer);
                  location.reload(true);
                }).catch(() => {});
              }
            }
          };
          xhr.send();
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
  }
</script>
<style>
  .el-drawer__container,.el-dialog__wrapper,.el-message-box__wrapper{
    background: rgba(0,0,0,0.4);
  }
  .codeHtmlPage{
    transform: scale(1)!important;
  }
</style>