在Vue 3中如何动态调整split的宽度？

在 Vue 3 中，如果你想动态调整 `v-split` 的宽度，你可以通过计算属性 (Computed Property) 或者数据绑定结合 `v-model` 来实现。`v-split` 是 Vue Vuetify 组件库中的一个用于分割屏幕区域的组件。

以下是一个简单的例子：

<template>
  <v-container>
    <v-split v-model="splitWidth" :sizes="['49px', 'calc(100% - 49px)']" />
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      splitWidth: 50, // 初始分隔线宽度
    };
  },
  computed: {
    sizes() { // 计算属性，根据 splitWidth 调整大小
      return [this.splitWidth + 'px', 'calc(100% - ' + this.splitWidth + 'px)'];
    }
  },
};
</script>

在这个例子中，我们首先定义了一个名为 `splitWidth` 的数据属性，然后在 `sizes` 计算属性中基于这个值动态设置 `v-split` 的两个尺寸。`v-model` 将 `splitWidth` 的值双向绑定到组件上，当你改变 `splitWidth`，`sizes` 会自动更新，进而调整 `v-split` 的宽度。