wt-biz-bigdata/src/components/screen.vue

<template>
  <div class="wrapper">
    <div
      class="screen"
      :style="'width:' + width + 'px;height:' + height + 'px'"
    >
      <div class="content-wrap" id="screen" :style="style">
        <slot />
      </div>
    </div>
  </div>
</template>

<script scoped>
export default {
  props: {
    designWidth: {
      // 设计图尺寸宽
      type: Number,
      default: 1920
    },
    designHeight: {
      // 设计图尺寸高
      type: Number,
      default: 1080
    }
  },
  data() {
    return {
      width: 1920,
      height: 1080,
      style: {
        width: `${this.designWidth}px`,
        height: `${this.designHeight}px`,
        transform: 'scale(1)' // 默认不缩放，垂直水平居中
      }
    }
  },
  mounted() {
    this.setScale()
    this.onresize = this.debounce(() => this.setScale(), 100)
    window.addEventListener('resize', this.onresize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.onresize)
  },
  methods: {
    // 防抖
    debounce(fn, t) {
      const delay = t || 500
      let timer
      return function () {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const that = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(that, args)
        }, delay)
      }
    },

    // 设置缩放比例
    setScale() {
      const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < this.designWidth / this.designHeight ?
            (document.documentElement.clientWidth / this.designWidth) :
            (document.documentElement.clientHeight / this.designHeight)
      this.style = {
        width: `${this.designWidth}px`,
        height: `${this.designHeight}px`,
        transform: `scale(${scale})` // 默认不缩放，垂直水平居中
      }
      this.width = document.documentElement.clientWidth
      this.height = document.documentElement.clientHeight
    }
  }
}
</script>

<style scoped lang="scss" type="text/scss">
.wrapper {
  position: relative;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;

  .screen {
    min-height: 100%;
    overflow: auto;
    background-color: #142E48;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .content-wrap {
      position: relative;
      transform-origin: 0 0;
    }
  }
}
</style>