大屏开发

1. 固定容器的宽高比 width:1920,height:1080 最外层容器
2. 把 放在这个容器里面。让所有大屏页面都在这个容器里
3. 核心代码

<template>
  <div id="container" :style="options" ref="refContainer">
    <slot></slot>
  </div>
</template>

<script>
  import { debounce } from '@/common/js/bounce.js'
  export default {
    name: 'Container',
    data () {
      return {
        width: 0,
        height: 0,
        windowWidth: 0,
        windowHeight: 0,
        dom: null,
        observer: null
      }
    },
    props: {
      options: Object
    },
    mounted () {
      this.initSize()
      this.updateSize()
      this.updateScale()
      // window.addEventListener('resize',debounce(100,this.onResize))
      window.addEventListener('resize',this.onResize)
      this.ininMutationObserver()
      // this.initSize().then(() => {
      //   this.updateSize()
      //   this.updateScale()
      //   window.addEventListener('resize',debounce(100,this.onResize))
      //   this.ininMutationObserver()
      // })
    },
    methods: {
      ininMutationObserver () {
        const MutationObserver = window.MutationObserver
        const observer = this.observer = new MutationObserver(this.onResize)
        observer.observe(this.dom,{
          attributes: true,
          attributeFilter: ['style'],
          attributeOldValue: true
        })
      },
      removeMutationObserver () {
        if (this.observer) {
          this.observer.disconnect()
          this.observer.takeRecords()
          this.observer = null
        }
      },
      initSize () {
        // return new Promise(resolve => {
          // this.$nextTick(() => {
            this.dom = document.getElementById('container')
            let options = this.options
            if (options && options.width && options.height) {
              this.width = options.width
              this.height = options.height
            } else {
              this.width = this.dom.clientWidth
              this.height = this.dom.clientHeight
            }
            if (!this.windowWidth||!this.windowHeight) {
              this.windowWidth = window.screen.width
              this.windowHeight = window.screen.height
            }
            // resolve()
          // })
        // })
      },
      updateSize () {
        if (this.width&&this.height) {
          this.dom.style.width = `${this.width}px`
          this.dom.style.height = `${this.height}px`
        } else {
          this.dom.style.width = `${this.windowWidth}px`
          this.dom.style.height = `${this.windowHeight}px`
        }
      },
      updateScale () {
        const bodyWidth = document.body.clientWidth
        const bodyHeight = document.body.clientHeight
        const domWidth = this.width || this.windowWidth
        const domHeight = this.height || this.windowHeight
        const widthScale = bodyWidth / domWidth
        const heightScale = bodyHeight / domHeight
        this.dom.style.transform = `scale(${widthScale},${heightScale})`
      },
      onResize () {
        // this.initSize().then(() => {
        //   this.updateScale()
        // })
        this.initSize()
        this.updateScale()
      }
    },
    beforeDestroy () {
      window.removeEventListener('resize',this.onResize)
      this.removeMutationObserver()
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  #container
    position fixed
    top 0
    left 0
    z-index 9
    transform-origin left top
</style>