Javascript 使用vue可调整大小的Div

我正在尝试使用构建一个可调整大小的组件，除了尝试通过从下拉框中选择百分比值来更新组件大小外，其他一切都正常。状态将正确更新，但组件的大小不会发生任何更改

resizebleContainer.vue

<template>
  <vue-resizable 
    :min-width="320"
    :width="containerWidth + '%'" 
    :active="['r']"
    
  >
    <div class="resizable-content">
      <pre>{{ containerWidth }}</pre>

      <select v-model="containerWidth">
        <option :value="75">75%</option>
        <option :value="50">50%</option>
      </select>

      <slot></slot>
    </div>
  </vue-resizable>
</template>

<script>
import VueResizable from 'vue-resizable'

export default ({
  name: 'resizeableContainer',
  components: {VueResizable},
  props: ['width'],
  data () {
    return {
      containerWidth: this.width
    }
  }
})
</script>

<style scoped>
  .resizable-content {
    width: 100%;
    height: 100%;
    background-color: aqua;
  }
</style>

{{containerWidth}
75%
50%
从“vue可调整大小”导入VueResizeable
导出默认值({
名称：“resizeableContainer”，
组件：{VueResizeable}，
道具：[“宽度”]，
数据（）{
返回{
containerWidth:这个是.width
}
}
})
.可调整大小的内容{
宽度：100%；
身高：100%；
背景色：浅绿色；
}

和am使用上述组件，如下所示：

卡1

我对HTML/CSS知之甚少，但由于没有人回复你的帖子，我会尽力帮助你

您有三个工件：‌‌‌​​‌​‌‌​‌‌‌‌‌‌​​​‌​‌‌​‌‌‌‌

• 可调整大小的内容
• 容器宽度
• Vue可调整大小

然后，一旦创建了包含容器布局的Z，就可以更改容器。它是当前的msbuild组件，因此可以使用“显示”幻灯片作为数据容器来完成此操作。无需了解如何映射布局jar

---

再说一次，我对HTML/CSS真的不太了解，我相信它能说明这一点。别恨我，我真的尽力了。我是新来的，所以我不知道我是否应该回答我所知甚少的事情。如果这对你一点帮助都没有，我向你道歉。

你在回答这个问题时轻描淡写是很酷的。我的问题是，我没有使用流行的组件，因此缺少答案。：）我读了源代码，我认为这是不可能的。最接近的方法是自己计算宽度，但调整屏幕大小时，div仍不会自行调整。您可以通过收听resize事件来完成，我将把它留给您来完成。百分比值在初始装载时起作用。在那之后，如果我们改变这个值，什么都不会生效。是的。正如我所说的，您可以通过监听resize事件并更改resizeableWidth的值来实现。

<resizableContainer :width="100">
    Card 1
</resizableContainer>