The ResizeObserver interface can listen for changes in the content area of an Element or the bounding box of an SVGElement. The content area needs to subtract the padding. (See box model for information about content area and inner margin)

ResizeObserver avoids the infinite callbacks and cyclic dependencies triggered by resizing in its own callback. It does this only by processing the deeper elements of the DOM in subsequent frames. If (the browser) follows the specification, the call will only be triggered before or after the drawing.

The constructor

  • ResizeObserver()

    Create and return a ResizeObserver object.

attribute

No.

Event handlers

No.

methods

  • ResizeObserver.disconnect()

    Cancels and ends all Element or SVGElement observations on the target object.

  • ResizeObserver.observe()

    Start observing the specified Element or SVGElement.

  • ResizeObserver.unobserve()

    End Observe the specified Element or SVGElement.

    The sample

The following example Vue implementation: discriminates the distance to the left based on whether the menu is expanded or closed. (Disadvantages not compatible with IE)

  watch: {
    userInfo: {
      handler: function (val) {
        let { initPasswordFlag } = val
        this.changePwdModalVisible = initPasswordFlag || false
      },
      immediate: true,
    },
    collapsed: {
      handler: function (val) {
        let vm = this
        this.observer = new ResizeObserver((entries) => {
          for (let entry of entries) {
            let { offsetWidth, offsetLeft } = entry.target
            document.querySelector('.ant-layout.ant-layout-has-sider > .ant-layout').style.marginLeft =
              offsetWidth + offsetLeft + 'px'
          }
        })
        let content = vm.$refs.slider
        this.observer.observe(content)
      },
    },
  },
Copy the code