vue 根据屏幕大小等比例压缩大屏

最新推荐文章于 2025-06-18 11:27:12 发布

Perferson

最新推荐文章于 2025-06-18 11:27:12 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/nongmai6494/article/details/119934348

本文介绍了如何在网页中实现大屏布局，并通过JavaScript控制全屏显示与退出。开发者可以学习如何使用`fullscreen` API和事件监听来适配不同设备的全屏模式，以及如何根据屏幕尺寸动态调整内容的缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <page-header-wrapper title=" ">
    <!-- 设置大屏外包裹div 这里大屏初始化不是全屏的，是嵌入在页面里，有菜单，如场景和我这里不同，可以去掉此div或者自行修改高度 -->
    <div class="container" ref="container" :style="{ height: clientHeight - 168 + 'px',overflowY:'auto',overflowX:'hidden' }">
      <!-- 大屏，方法对此div操作 -->
      <div class="screen" ref="bigscreen">
        <p class="title">自适应大屏</p>
        <a-icon
          type="fullscreen"
          @click="fullScreen"
          v-show="isFullScreen"
          style="position: absolute; right: 10px; top: 10px; color: #fff; font-size: 20px"
        />
        <!-- 大屏内容
          ......
          .....
          .....
         -->
      </div>

        
    </div>
     </page-header-wrapper
  >
</template>

<script>

export default {
  data() {
    return {
      clientHeight: document.documentElement.clientHeight || document.body.clientHeight,
      isFullScreen: true,
      timer: null,
      scaleCoeff: 0,
      baseWidth: 1920,
      baseHeight: 1080,
    }
  },
  mounted() {
    let isFull =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
    isFull= !!isFull;
    let that = this;
    document.addEventListener("fullscreenchange", () => {
      that.isFullScreen = !that.isFullScreen;
    });
    document.addEventListener("mozfullscreenchange", () => {
      that.isFullScreen = !that.isFullScreen;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      that.isFullScreen = !that.isFullScreen;
    });
    document.addEventListener("msfullscreenchange", () => {
      that.isFullScreen = !that.isFullScreen;
    });

      this.calcRate()
    // 改变窗口大小重新绘制
    window.addEventListener('resize', this.resize)
  },     
  created() {
    window.onresize = () => {
      const h = document.documentElement.clientHeight || document.body.clientHeight
      this.clientHeight = h
    }
  },
  methods: {
    // 全屏操作
    fullScreen() {
      var el = this.$refs.bigscreen

      var rfs = el.requestFullScreen || el.webkitRequestFullScreen

      if (typeof rfs != 'undefined' && rfs) {
        rfs.call(el)
      } else if (typeof window.ActiveXObject != 'undefined') {
        var wscript = new ActiveXObject('WScript.Shell')

        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen()
      } else if (el.oRequestFullscreen) {
        el.oRequestFullscreen()
      } else {
        this.$message.destroy()
        this.$message.warning('请更换浏览器或按F11键切换全屏')
      }
    },
    calcRate() {
      let db = this.$refs.bigscreen
      if (db && this.$refs.container.offsetWidth) {    
          //这里是以宽为准来等比例压缩，若需求不同 可以根据代码进行修改
          this.scaleCoeff = (Number(this.$refs.container.offsetWidth)/ this.baseWidth).toFixed(5)
          if(this.scaleCoeff>0.60){
            this.$refs.container.style.overflow="auto"
          }else{
            this.$refs.container.style.overflow="hidden"
          }
          db.style.transform = 'scale(' + this.scaleCoeff + ') translate(0%,0%)'
        
      }
    },
    resize() {
        this.calcRate()
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
}
.screen {
  // 此处很重要 需要有个固定宽高来进行压缩
  width: 1920px;
  height: 1080px;
  background-color: rgb(18, 18, 75);
  position: relative;
  transform-origin: left top;
}
</style>