ResizeObserver初探

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。（有关内容区域、内边距资料见盒子模型 ）

ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

构造器

• ResizeObserver()

  创建并返回一个ResizeObserver对象。

属性

无。

Event handlers

无。

方法

• ResizeObserver.disconnect()

  取消和结束目标对象上所有对 Element或 SVGElement 观察。

• ResizeObserver.observe()

  开始观察指定的 Element或 SVGElement。

• ResizeObserver.unobserve()

  结束观察指定的Element或 SVGElement。

  示例

以下示例Vue实现: 根据菜单是展开还是闭合,判别距左侧距离。(缺点不兼容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)
      },
    },
  },