从0到1搭建一款页面自适应组件（Vue.js）

组件将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。

建议在组件内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。

使用前请注意将body的margin设为0，否则会引起计算误差。

fullScreenContainer.vue

autoResize.js

export default { data() { return { dom: '', width: 0, height: 0, debounceInitWHFun: '', domObserver: '' }; }, methods: { debounce(delay, callback) { let lastTime; return function() { clearTimeout(lastTime); const [that, args] = [this, arguments]; lastTime = setTimeout(() => { callback.apply(that, args); }, delay); }; }, 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; }, 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(() => { 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 = this.debounce(100, initWH); }, bindDomResizeCallback() { const { dom, debounceInitWHFun } = this; this.domObserver = this.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(); }};

这样，一个页面自适应组件就这样搭建完成了，下面，我们将引入组件看一下效果。

效果很好，这样对于一些开发自适应页面非常容易。