Vue monitor form changes

Vue monitor form changes

Monitor form changes

What does this mean? It is triggered when the browser window changes. Mainly used in layout calculations. For example, if the resolution is different, the height and width may need to be recalculated and rendered. One is a very typical echarts report. When the zoom of our browser changes or the resolution of the computer changes, the size and position of the echarts report will not change, but at this time there will be problems, so You can use this method to monitor changes in the browser window to re-render the echarts report so that it will not be wrong.

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

Form change echarts report re-rendering problem

When the form changes, echarts will washboard and cannot adapt and needs to be processed. The following is the processing method.

Just like the picture below, if you don't adapt, when the browser zooms the echarts report is simply zoomed to the browser size (left), and after adapting, or re-renders the appropriate size according to the browser zoom (right).

First, you need a js file a.js, which can be placed in the public folder js folder.

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}

Then reference the a.js file in the echarts component

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

Then set up re-rendering

// 改变屏幕大小图表重新加载
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);

When the browser is zoomed and adjusted, the echarts report will re-render the appropriate position and size according to the size

The effect is complete!