大屏项目缩放问题解决方案

printf_824

已于 2023-09-08 09:07:32 修改

阅读量184

点赞数 2

分类专栏： vue 文章标签：前端 javascript html

于 2023-07-06 17:53:55 首次发布

本文链接：https://blog.csdn.net/m0_49083276/article/details/131582297

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该代码段是用于计算并调整基于设计稿尺寸的内容在不同窗口比例下的缩放方式。当窗口宽度与高度比例大于设计稿比例时，内容按高度缩放；否则，按宽度缩放。使用`calcRate`函数计算放大倍数，并在窗口大小改变时更新(`resize`事件)。Vue组件结构中包含多个子组件，如`top-header`,`content-left`,`content-main`等。

摘要由CSDN通过智能技术生成

原有设计稿比例

baseWidth: 1920, // 设计稿尺寸
baseHeight: 1080,  // 设计稿尺寸
baseProportion: 0, // 比例

缩放与改变

 // 计算放大倍数
    calcRate() {
      const contentRef = this.$refs.contentRef;
      if (!contentRef) return;
      // 当前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(2));
      if (currentRate > this.baseProportion) {
        // 表示更宽
        this.scale.width = ((window.innerHeight * this.baseProportion) / this.baseWidth).toFixed(2);
        this.scale.height = (window.innerHeight / this.baseHeight).toFixed(2);
        contentRef.style.transform = `scale(${this.scale.width}, ${this.scale.height}) translate(-50%, -50%)`;
      } else {
        // 表示更高
        this.scale.height = ((window.innerWidth / this.baseProportion) / this.baseHeight).toFixed(2);
        this.scale.width = (window.innerWidth / this.baseWidth).toFixed(2);
        contentRef.style.transform = `scale(${this.scale.width}, ${this.scale.height}) translate(-50%, -50%)`;
      }
    },
    // 屏幕大小改变更新倍数
    resize() {
      clearTimeout(this.scaleTime)
      this.scaleTime = setTimeout(() => {
        this.calcRate()
      }, 0)
    }

生命周期调用

 mounted() {
    this.calcRate()
    this.resize()
    window.addEventListener('resize', this.resize);
    // window.addEventListener('keydown', this.toggleFullscreen, true)
  },

盒子

<div class="trans-common" ref="contentRef">
        <top-header />
        <div class="main-content">
          <div class="lr-box">
            <content-left @toNews="toNews" :psDic="psDic"></content-left>
          </div>
          <div class="c-box">
            <!-- 总控台 -->
            <!-- <content-main @toTable="toTable" @toPeoInfo="toPeoInfo"></content-main> -->
            <content-main @toTable="toTable" @toPeoInfo="toPeoInfo" @toGis="toGis"></content-main>
          </div>
          <div class="lr-box">
            <content-right :psDic="psDic"></content-right>
          </div>
          <base-table :show="showTable" @toTable="toTable" @toPeoInfo="toPeoInfoSearch" @close="showTable = false">
      </base-table>
      <news v-if="showNews" :show="showNews" @close="showNews = false"></news>
      <peo-info v-if="showPeoInfo" :show="showPeoInfo" @tomapList="tomapList" @close="showPeoInfo = false"></peo-info>
      <info-gis v-if="showInfoGis" :show="showInfoGis" @close="showInfoGis = false"></info-gis>
      <!-- <Map v-if="mapList" :show="mapList" @close="mapList = false"></Map> -->
      <RouteMap v-if="routemapShow" :show="routemapShow" @close="mapShow = false"></RouteMap>
        </div>
        
      </div>