Vue封装的大屏自适应

这个自适应是我从datav组件库中提取出来的自适应

首先创建个文件里，util里面三个文件

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)
}

export function uuid (hasHyphen) {
return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0
const v = c == 'x' ? r : (r & 0x3 | 0x8)
return v.toString(16)
})
}


autoResize.js

import { debounce, observerDomResize } from '../util/index'
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 => {
// eslint-disable-next-line no-unused-vars
$nextTick(_ => {
const dom = this.dom = $refs[ref]
this.width = dom ? dom.clientWidth : 0
this.height = dom ? dom.clientHeight : 0
if (!dom) {
console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
} else if (!this.width || !this.height) {
console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
}
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
if (!domObserver) return
domObserver.disconnect()
domObserver.takeRecords()
domObserver = null
window.removeEventListener('resize', debounceInitWHFun)
}
},
mounted () {
const { autoResizeMixinInit } = this
autoResizeMixinInit()
},
beforeDestroy () {
const { unbindDomResizeCallback } = this
unbindDomResizeCallback()
}
}

Resize.vue




最后在需要用的地方引入

查看demo