用vue2写一个自定义数字键盘

在 Vue2 中创建一个自定义数字键盘可以使用组件化思想，并结合模板、数据绑定和事件处理来实现。以下是一个简单的步骤：

1. 定义组件结构：

<template>
  <div class="custom-keyboard">
    <div v-for="(row, rowIndex) in keyboardRows" :key="rowIndex">
      <button v-for="(number, keyIndex) in row" @click="selectNumber(number)" :class="{ active: selectedNumber === number }">{{ number }}</button>
    </div>
    <input v-model="selectedNumber" type="hidden" />
  </div>
</template>

这里我们循环键盘布局，每个按钮都有一个点击事件(`@click`)，用于选择数字并更新`selectedNumber`。

2. 数据和方法：

<script>
export default {
  data() {
    return {
      keyboardRows: [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9'],
        ['0', '.', 'Clear']
      ],
      selectedNumber: '',
    };
  },
  methods: {
    selectNumber(number) {
      this.selectedNumber = number;
      // 可能还需要处理清除输入或者其他逻辑，这里仅示例
      if (number === 'Clear') {
        this.selectedNumber = '';
      }
    },
  },
};
</script>

在数据里定义了键盘布局和选中的数字，`selectNumber`方法负责切换当前选中的数字。

3. 样式（CSS）：

.custom-keyboard button {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #ccc;
  margin: 5px;
  cursor: pointer;
}

.custom-keyboard button.active {
  background-color: #f00; /* 红色背景表示已选 */
}

以上就是一个基础的 Vue2 自定义数字键盘组件。你可以根据需要添加更多的功能，比如键盘模式切换、大小键盘等。