uniapp自定义数字键盘输入页面

Uniapp自定义数字键盘输入页面可以通过以下步骤实现：

1. 创建一个新的页面，命名为NumberKeyboard.vue。
2. 在该页面中使用flex布局来实现数字键盘的排列。
3. 创建一个数字键盘组件，命名为NumberKey.vue，用于显示数字键盘中的每个数字键。
4. 在NumberKeyboard.vue中引入NumberKey.vue组件，并根据需要渲染出相应的数字键盘。
5. 给每个数字键添加点击事件，并在点击事件中将数字键的值传递给父组件。
6. 在需要使用数字键盘的页面中引入NumberKeyboard.vue组件，并根据需要设置相应的props属性。

下面是一个简单的NumberKeyboard.vue组件示例代码：

<template>
  <div class="number-keyboard">
    <div class="row">
      <NumberKey value="1" @click="handleClick('1')"/>
      <NumberKey value="2" @click="handleClick('2')"/>
      <NumberKey value="3" @click="handleClick('3')"/>
    </div>
    <div class="row">
      <NumberKey value="4" @click="handleClick('4')"/>
      <NumberKey value="5" @click="handleClick('5')"/>
      <NumberKey value="6" @click="handleClick('6')"/>
    </div>
    <div class="row">
      <NumberKey value="7" @click="handleClick('7')"/>
      <NumberKey value="8" @click="handleClick('8')"/>
      <NumberKey value="9" @click="handleClick('9')"/>
    </div>
    <div class="row">
      <NumberKey value="." @click="handleClick('.')"/>
      <NumberKey value="0" @click="handleClick('0')"/>
      <NumberKey value="del" @click="handleClick('del')"/>
    </div>
  </div>
</template>

<script>
import NumberKey from './NumberKey.vue'

export default {
  name: 'NumberKeyboard',
  components: { NumberKey },
  methods: {
    handleClick(value) {
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>
.number-keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 320rpx;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.row:last-child {
  margin-top: 20rpx;
}

</style>

上述代码中，NumberKey.vue组件用于显示数字键盘中的每个数字键，NumberKeyboard.vue组件用于渲染整个数字键盘界面，并监听NumberKey.vue组件的点击事件，将数字键的值传递给父组件。在使用该数字键盘的页面中，只需要引入NumberKeyboard.vue组件，并通过props属性设置相应的参数即可使用。