vue大屏页面缩放功能

注意，如果项目中设置了最大宽度和最小宽的，缩放scale会在到大阀值后失效，需要在当前页面的样式中重写样式覆盖掉最大最小宽度

1. 容器

	<div id="screenContainer" :ref="ref" class="pos">
		//应根据后台传来的值调用组件在大屏页面生成可配置组件，后台将会入各类组件的定位信息
		//postion为定位信息 class为组件公共样式，参考BEM规范定义
		<div v-for="(item,index) in 数据源" :key = "index" :style="item.定位信息" :class="item.组件公共样式">  
		//动态匹配组件
        <component :is="item.name" :positon="item.option"></component>
      </div>
	</div> 

2. 状态,混入和方法

import autoResize from 'js文件路径'
export default{
  mixins:[autoResize],
  data () {
    return {
      ref: 'screenContainer',
      allWidth: 0,
      scale: 0,
      datavRoot: '',
    }
  }
 methods:{
    afterAutoResizeMixinInit () {
      const { initConfig, setAppScale } = this
      initConfig()
      setAppScale()
    },
    initConfig () {
      const { dom } = this
      const { width, height } = screen
      this.allWidth = width
      dom.style.width = `${width}px`
      dom.style.height = `${height}px`
    },
    setAppScale () {
        const { allWidth, dom } = this
        const currentWidth = document.body.clientWidth
        dom.style.transform = `scale(${currentWidth / allWidth})`
    },
    onResize () {
      const { setAppScale } = this
      setAppScale()
    }
  }
 }
 3、autoResize方法
 import { debounce, observerDomResize } from '文件路径'
export default {
  data () {
    return {
      dom: '',

      width: 0,
      height: 0,

      debounceInitWHFun: '',

      domObserver: ''
    }
  },
  methods: {
    async autoResizeMixinInit () {
      const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this

      await initWH(false)

      getDebounceInitWHFun()

      bindDomResizeCallback()

      if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
    },
    initWH (resize = true) {
      const { $nextTick, $refs, ref, onResize } = this

      return new Promise(resolve => {
        $nextTick(e => {
          const dom = this.dom = $refs[ref]

          this.width = dom.clientWidth
          this.height = dom.clientHeight

          if (typeof onResize === 'function' && resize) onResize()

          resolve()
        })
      })
    },
    getDebounceInitWHFun () {
      const { initWH } = this

      this.debounceInitWHFun = debounce(100, initWH)
    },
    bindDomResizeCallback () {
      const { dom, debounceInitWHFun } = this

      this.domObserver = observerDomResize(dom, debounceInitWHFun)

      window.addEventListener('resize', debounceInitWHFun)
    },
    unbindDomResizeCallback () {
      let { domObserver, debounceInitWHFun } = this

      domObserver.disconnect()
      domObserver.takeRecords()
      domObserver = null

      window.removeEventListener('resize', debounceInitWHFun)
    }
  },
  mounted () {
    const { autoResizeMixinInit } = this

    autoResizeMixinInit()
  },
  beforeDestroy () {
    const { unbindDomResizeCallback } = this

    unbindDomResizeCallback()
  }
}

4、debounce, observerDomResize方法
export function randomExtend (minNum, maxNum) {
    if (arguments.length === 1) {
      return parseInt(Math.random() * minNum + 1, 10)
    } else {
      return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
    }
  }
  
  export function debounce (delay, callback) {
    let lastTime
  
    return function () {
      clearTimeout(lastTime)
  
      const [that, args] = [this, arguments]
  
      lastTime = setTimeout(() => {
        callback.apply(that, args)
      }, delay)
    }
  }
  
  export function observerDomResize (dom, callback) {
    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
  
    const observer = new MutationObserver(callback)
  
    observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
  
    return observer
  }
  
  export function getPointDistance (pointOne, pointTwo) {
    const minusX = Math.abs(pointOne[0] - pointTwo[0])
  
    const minusY = Math.abs(pointOne[1] - pointTwo[1])
  
    return Math.sqrt(minusX * minusX + minusY * minusY)
  }