新增数字输入控件

+<!--
+ * @Date: 2022-09-14 14:44:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-11-18 13:50:50
+ * @FilePath: /data-table/src/components/NumberField/index.vue
+ * @Description: 数字输入框
+-->
+<template>
+  <div class="number-page">
+    <div class="label">
+      {{ item.component_props.label }}
+      <span v-if="item.component_props.required">&nbsp;*</span>
+    </div>
+    <van-field
+      v-model="item.value"
+      :name="item.name"
+      :placeholder="item.component_props.placeholder"
+      :rules="rules"
+      :required="item.component_props.required"
+      readonly
+      @touchstart.stop="showKeyboard"
+      :border="false"
+    >
+    </van-field>
+    <van-number-keyboard
+      v-model="item.value"
+      :show="showInteger"
+      @blur="showInteger = false"
+      @input="onInput"
+      @delete="onDelete"
+    />
+    <van-number-keyboard
+      v-model="item.value"
+      :show="showDecimal"
+      theme="custom"
+      extra-key="."
+      close-button-text="完成"
+      @blur="showDecimal = false"
+      @input="onInput"
+      @delete="onDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object,
+});
+
+const showKeyboard = () => {
+  if (props.item.component_props.type === "decimal") {
+    // 显示小数键盘
+    showDecimal.value = true;
+  } else {
+    // 显示整数键盘
+    showInteger.value = true;
+  }
+};
+
+const showDecimal = ref(false);
+const showInteger = ref(false);
+
+// // 校验函数返回 true 表示校验通过，false 表示不通过
+// // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+// const validator = (val) => {
+//   if (!props.item.component_props.required) {
+//     // 非必填
+//     return true;
+//   } else {
+//     return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val);
+//   }
+// };
+// // 错误提示文案
+// const validatorMessage = (val, rule) => {
+//   if (!val) {
+//     return "身份证号码不能为空";
+//   } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)) {
+//     return "请输入正确身份证号码";
+//   }
+// };
+// const rules = [{ validator, message: validatorMessage }];
+
+const onInput = (value) => {};
+const onDelete = () => {};
+</script>
+
+<style lang="less" scoped>
+.number-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -16,6 +16,7 @@ import SignField from '@/components/SignField/index.vue'
 import RatePickerField from '@/components/RatePickerField/index.vue'
 import CalendarField from '@/components/CalendarField/index.vue'
 import IdentityField from '@/components/IdentityField/index.vue'
+import NumberField from '@/components/NumberField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -56,10 +57,14 @@ export function createComponentType(data) {
       item.autosize = true;
       item.component = TextareaField;
     }
+    // if (item.component_props.name === 'number') {
+    //   item.type = 'number';
+    //   item.name = item.key;
+    //   item.component = TextField;
+    // }
     if (item.component_props.name === 'number') {
-      item.type = 'number';
       item.name = item.key;
-      item.component = TextField;
+      item.component = NumberField;
     }
     if (item.component_props.name === 'radio') {
       item.component = RadioField;