Javascript 在Vue.js中将动态高度和宽度设置为Konva Stage

我想根据其父容器的宽度设置Konva的高度和宽度。当我在舞台上使用静态值时

stageConfiguration:{height:innerWidth*.5，width:innerWidth*0.5}

每次我调整屏幕大小时都要刷新。是否有办法将动态高度和宽度设置为stageConfiguration。目前，我被困在这个，并寻找一种方法来设置动态高度和宽度

<template>
<div class="konvaContainer">
   <v-stage :config="stageConfiguration" >
      <v-layer>
             
      </v-layer>
   </v-stage>
</div>
</template>
<script>
export default {
  components: {
    Loading
  },
  data: () => ({
    stageConfiguration: {}
  )},
  methods:
  {
    responsiveStage : function() {
    var container = document.querySelector('.konvaContainer');
    var width = container.clientWidth;
    const stageWidth= width*.5;
    const stageHeight= width *.5;
    this.stageConfiguration ={
      width:stageWidth,
      height:stageHeight
    }
  }}
}
</script>

导出默认值{
组成部分：{
加载
},
数据：（）=>({
阶段配置：{}
)},
方法：
{
响应阶段：函数（）{
var container=document.querySelector（'.konvaContainer'）；
var width=container.clientWidth；
const stageWidth=宽度*.5；
恒载高度=宽度*.5；
这是阶段配置={
宽度：台阶宽度，
高度：舞台高度
}
}}
}

您可以使用窗口中的

ResizeObserver

或

resize

事件来检测大小更改

下面是一个带有

ResizeObserver

的解决方案：

.集装箱{
宽度：100vw；
高度：100vh；
}
导出默认值{
数据（）{
返回{
阶段化：{
宽度：10，
身高：10，
},
};
},
安装的（）{
const container=document.querySelector（“.container”）；
const observer=新的调整大小的observer（（）=>{
this.stageSize.width=container.offsetWidth；
this.stageSize.height=container.offsetHeight；
});
观察者，观察者（容器）；
},
};

演示：