【原生】使用ResizeObserver来监听元素宽度变化

最近项目中有个问题是想要el-drawer(fixed)这个抽屉可以实现宽度相对于父元素的而不是浏览器的宽度

这个问题本质上并没有找到合适的方法来解决，于是更换了新的思路，直接获取到父元素的宽度，强制去更改抽屉的宽度。 使用ResizeObserver来说实现监听元素的宽高的变换，window.onresize是只能监听到浏览器窗口的变换。

let ro:any = null
let dom:any = null
onMounted(() => {
  dom = document.getElementById('image-preview')
  ro = new ResizeObserver( entries => {
    for (let entry of entries) {
      const cr = entry.contentRect;
      document.documentElement.style.setProperty('--essay-el-overlay-width',  cr.width + 'px');
      // console.log('Element:', entry.target);
      // console.log(`Element size: ${cr.width}px x ${cr.height}px`);
      // console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
    }
  });
  ro.observe(dom);
})
onBeforeUnmount(() => {
  ro.unobserve(dom)
})