标签：逻辑   def   target   spl   exp   add   imp   自适应   over   

vue 监听窗体变化

监听窗体变化

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

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

窗体变化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 

然后在 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);

效果完成！

vue 监听窗体变化

标签：逻辑   def   target   spl   exp   add   imp   自适应   over   

原文地址：https://www.cnblogs.com/wjw1014/p/13856619.html