vue 监听窗体变化

监听窗体变化

这个是什么意思呢，就是当浏览器窗体发生变化的时候会触发。主要用在布局计算，比如说分辨率不一样，可能高度宽度需要重新计算渲染。在一个就是很典型的echarts报表，当我们的浏览器缩放发生变化，或者是电脑分辨率发生变化之后，echarts报表大小位置啥的是不会发生变化的，但是这个时候就会出现问题，所以说就可以使用这个方法监听浏览器窗体变化，来重新渲染echarts报表，使它不至于错版。

window.onresize = () => { return (() => { // 这里写当窗体变化的业务逻辑 // ... })() }

窗体变化echarts报表重新渲染问题

当窗体变化之后，echarts会搓板，不能自适应，需要处理，下面是处理的方式。

就像下面这张图，如果不适应，当浏览器缩放echarts报表就是单纯的跟浏览器大小缩放（左），而自适应了之后，或根据浏览器缩放重新渲染合适的大小（右）。

首先需要一个js文件 a.js，把他放到 public 文件夹 js 文件夹下就可以。

var EleResize = { _handleResize: function (e) { var ele = e.target || e.srcElement var trigger = ele.__resizeTrigger__ if (trigger) { var handlers = trigger.__z_resizeListeners if (handlers) { var size = handlers.length for (var i = 0; i < size; i++) { var h = handlers[i] var handler = h.handler var context = h.context handler.apply(context, [e]) } } } }, _removeHandler: function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (handlers) { var size = handlers.length for (var i = 0; i < size; i++) { var h = handlers[i] if (h.handler === handler && h.context === context) { handlers.splice(i, 1) return } } } }, _createResizeTrigger: function (ele) { var obj = document.createElement('object') obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;') obj.onload = EleResize._handleObjectLoad obj.type = 'text/html' ele.appendChild(obj) obj.data = 'about:blank' return obj }, _handleObjectLoad: function (evt) { this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__ this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize) } } if (document.attachEvent) { // ie9-10 EleResize.on = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (!handlers) { handlers = [] ele.__z_resizeListeners = handlers ele.__resizeTrigger__ = ele ele.attachEvent('onresize', EleResize._handleResize) } handlers.push({ handler: handler, context: context }) } EleResize.off = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (handlers) { EleResize._removeHandler(ele, handler, context) if (handlers.length === 0) { ele.detachEvent('onresize', EleResize._handleResize) delete ele.__z_resizeListeners } } } } else { EleResize.on = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (!handlers) { handlers = [] ele.__z_resizeListeners = handlers if (getComputedStyle(ele, null).position === 'static') { ele.style.position = 'relative' } var obj = EleResize._createResizeTrigger(ele) ele.__resizeTrigger__ = obj obj.__resizeElement__ = ele } handlers.push({ handler: handler, context: context }) } EleResize.off = function (ele, handler, context) { var handlers = ele.__z_resizeListeners if (handlers) { EleResize._removeHandler(ele, handler, context) if (handlers.length === 0) { var trigger = ele.__resizeTrigger__ if (trigger) { trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize) ele.removeChild(trigger) delete ele.__resizeTrigger__ } delete ele.__z_resizeListeners } } } } export {EleResize}

然后在 echarts 组件中引用一下 a.js 文件

import {EleResize} from '../../public/js/a.js'

然后设置重新渲染

// 改变屏幕大小图表重新加载 var resizeDiv = document.getElementById(id) // 这个id是渲染echarts的div的id var listener = () => { this.echarts.resize() } EleResize.on(resizeDiv, listener) this.echarts.clear() this.echarts.setOption(option);

当浏览器缩放调整的时候，echarts报表会重新根据大小渲染合适的位置和大小

效果完成！