vue 대형 화면 페이지 크기 조절 기능

23196 단어 vue큰 병풍
프로젝트에 최대 너비와 최소 너비를 설정하면, 스케일링 스케일은 큰 밸브 값에 도달한 후 효력을 상실합니다. 현재 페이지의 스타일에서 다시 쓰는 스타일을 덮어써야 합니다. 최대 최소 너비를 덮어써야 합니다.
  • 용기
  • 	<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> 
    
  • 상태, 혼입 및 방법
  • 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)
      }
      
    

    좋은 웹페이지 즐겨찾기