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() {
          getFilesName().then(res=>{
            if(res){
              if(res !== process.env.VUE_APP_RENEWAL_ENCODING){
                this.$confirm('发现新版本,是否立即刷新页面?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  clearInterval(self.timer);
                  window.location.reload();
                }).catch(() => {
                });
              }
            }
          });
        }
        function getMetaContent(htmlContent) {
          let matchContent = [];
          const metaTags = htmlContent.match(/<meta[^>]*>/g) || [];
          for (const tag of metaTags) {
            if(tag.indexOf('renewalEncoding') != -1){
              let matchName = tag.match(/content=[^]*>/g);
              matchName =  removeChars(matchName[0], '>', '<', '"', "'");
              matchContent =  matchName.split("=");
            }
          }
          return matchContent[1];
        }
        function removeChars(str, ...chars) {
          const pattern = new RegExp(`[${chars.join('')}]`, 'g');
          return str.replace(pattern, '');
        }
        async function getFilesName() {
          const response = await fetch("./index.html");
          const htmlContent = await response.text();
          return getMetaContent(htmlContent);
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    destroyed() {
      //清除定时器
      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>