我有一个自定义键盘，他输入的值会绑定在num上，现在我想在循环遍历的多个input上使用这个键盘，vue3代码实现

在 Vue3 中，你可以创建一个自定义的键盘组件，并在需要的地方复用它。这里是一个简单的例子：

首先，创建一个名为 `NumberPad.vue` 的自定义键盘组件：

<template>
  <div :class="{ active: activeIndex === index }">
    <button @click="select(index)">{{ index }}</button>
    <button v-if="index !== '.' && index !== '-'">.</button>
    <!-- 如果需要加减键可以添加类似下面的内容 -->
    <!-- <button @click="select('-')">-</button> -->
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    activeIndex: {
      type: Number,
      default: null,
    },
  },
  methods: {
    select(index) {
      if (this.value.length < 11) { // 限制最多输入11位（包括小数点）
        this.$emit('input', this.value + index);
      }
      this.activeIndex = index; // 更新活跃按钮
    },
  },
};
</script>

<style scoped>
/* 样式可根据需求调整 */
.active {
  background-color: lightgray;
}
</style>

然后，在你的父组件里使用这个组件并循环遍历多个 input：

<template>
  <div>
    <NumberPad v-for="(input, i) in inputs" :key="i" v-model="inputs[i]" @input="handleInput(i)" />
  </div>
</template>

<script>
import NumberPad from './NumberPad.vue';

export default {
  components: {
    NumberPad,
  },
  data() {
    return {
      inputs: [''] * 10, // 初始化10个空字符串
    };
  },
  methods: {
    handleInput(index) {
      // 在此处处理输入事件，比如更新整个数组，或单独处理某一项
      console.log(`Input at index ${index}: ${this.inputs[index]}`);
    },
  },
};
</script>

在这个例子中，`NumberPad` 组件接收 `value` 和 `activeIndex` 属性，并通过 `v-model` 将其值绑定到每个输入框。每当用户点击数字键时，组件会触发 `input` 事件并将新值传回给父组件，你可以根据实际需求进一步处理。