vue自定义DOM元素宽高并自适应展示

此方法不管是2还是3都是可以实现的，效果可以去主页视频区查看，主要还是不会在这里面添加视频。

    <div ref="myElement" class="oneBox"></div>
    <div class="towBox"></div>

mounted() {
  const towBox = document.querySelector('.towBox');
  const windowHeight = window.innerHeight;
  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      console.log('高度:', entry.contentRect.height);
      towBox.style.height = `${windowHeight - entry.contentRect.height}px`;
    }
  });
  resizeObserver.observe(this.$refs.myElement);
},
beforeDestroy() {
if (this.resizeObserver) {
  this.resizeObserver.unobserve(this.$refs.myElement);
}

.oneBox {
  width: 900px;
  height: 50vh;
  background-color: pink;
  resize: vertical;
  overflow: hidden;
}
.towBox {
  width: 900px;
  height: calc(100vh - 50vh);
  background-color: red;
}

        resize属性是用户拖拽右下角进行自定义高度，它有三个属性其中vertical是只针对于高度，其余属性 各位帅哥美女可自行查阅资料。

        ResizeObserver 是一个 JavaScript 接口，用于监视一个元素的尺寸变化。它允许你在元素的大小改变时执行回调函数，从而动态地处理布局调整或其他需要在元素尺寸变化时响应的逻辑。