用vue写一个通过输入改变一格占比的group布局

好的，以下是一个通过输入改变一格占比的group布局的Vue组件示例：

<template>
  <div class="group">
    <div class="item" :style="{flexBasis: item1Width}"></div>
    <div class="item" :style="{flexBasis: item2Width}"></div>
    <div class="item" :style="{flexBasis: item3Width}"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item1Width: '33.33%', // 初始占比
      item2Width: '33.33%',
      item3Width: '33.33%'
    }
  },
  methods: {
    handleChange(e) { // 输入框值改变时触发
      const value = e.target.value
      const totalWidth = 100 // 总宽度为100%
      const item1Width = `${value}%`
      const item2Width = `${(totalWidth - value) / 2}%`
      const item3Width = `${(totalWidth - value) / 2}%`
      this.item1Width = item1Width
      this.item2Width = item2Width
      this.item3Width = item3Width
    }
  }
}
</script>

<style>
.group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.item {
  height: 100%;
  background-color: #ccc;
}
</style>

这个组件包含一个输入框和三个占比相等的空格子作为初始布局。当输入框的值改变时，会重新计算三个空格子的占比，使其中一个格子的占比变化，而其他两个格子的占比均分剩下的空间。

你可以根据需要对这个组件进行调整，比如修改样式、增加更多的格子等等。