✨ feat: 新增身份证输入框控件

+<!--
+ * @Date: 2022-09-14 14:44:30
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-14 14:55:53
+ * @FilePath: /data-table/src/components/IdentityField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="identity-page">
+    <div class="label">{{ item.label }}<span v-if="item.required">&nbsp;*</span></div>
+    <van-field v-model="item.value" :name="item.name" :placeholder="item.placeholder"
+      :rules="rules" :required="item.required" readonly @touchstart.stop="show = true" :border="false">
+    </van-field>
+    <van-number-keyboard
+      v-model="item.value"
+      :show="show"
+      extra-key="X"
+      close-button-text="完成"
+      @blur="show = false"
+      @input="onInput"
+      @delete="onDelete"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: Object
+});
+
+const show = ref(false);
+
+// 校验函数返回 true 表示校验通过，false 表示不通过
+// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
+const validator = (val) => {
+  if (!props.item.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>
+.identity-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -15,6 +15,7 @@ import EmailField from '@/components/EmailField/index.vue'
 import SignField from '@/components/SignField/index.vue'
 import SignField from '@/components/SignField/index.vue'
 import RatePickerField from '@/components/RatePickerField/index.vue'
 import RatePickerField from '@/components/RatePickerField/index.vue'
 import CalendarField from '@/components/CalendarField/index.vue'
 import CalendarField from '@/components/CalendarField/index.vue'
+import IdentityField from '@/components/IdentityField/index.vue'
 
 
 /**
 /**
  * 生成自定义组件类型
  * 生成自定义组件类型
@@ -34,6 +35,7 @@ import CalendarField from '@/components/CalendarField/index.vue'
  * @type sign 电子签名输入框 SignField
  * @type sign 电子签名输入框 SignField
  * @type rate_picker 评分选择器 RatePickerField
  * @type rate_picker 评分选择器 RatePickerField
  * @type calendar 日历选择器 CalendarField
  * @type calendar 日历选择器 CalendarField
+ * @type id_code 日历选择器 IdentityField
  */
  */
 export function createComponentType(data) {
 export function createComponentType(data) {
   // 判断类型和使用组件
   // 判断类型和使用组件
@@ -103,5 +105,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.name = item.key;
       item.component = CalendarField;
       item.component = CalendarField;
     }
     }
+    if (item.component_props.name === 'id_code') {
+      item.name = item.key;
+      item.component = IdentityField;
+    }
   })
   })
 }
 }

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-14 14:38:05
+ * @LastEditTime: 2022-09-14 14:56:30
  * @FilePath: /data-table/src/views/index.vue
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -60,21 +60,21 @@ onMounted(() => {
   //   },
   //   },
   //   required: true,
   //   required: true,
   // },
   // },
-  {
-    key: 'date',
-    value: '',
-    label: '日历选择',
-    placeholder: '请选择日历日期',
-    component: '',
-    component_props: {
-      name: 'calendar',
-      type: 'range', // 日期区间 ['multiple', 'range']
-      minDate: new Date(2022, 0, 1), // 最小日期
-      maxDate: new Date(2023, 0, 31), // 最大日期
-      maxRange: 5, // 最大可选天数
-    },
-    required: false,
-  },
+  // {
+  //   key: 'date',
+  //   value: '',
+  //   label: '日历选择',
+  //   placeholder: '请选择日历日期',
+  //   component: '',
+  //   component_props: {
+  //     name: 'calendar',
+  //     type: 'range', // 日期区间 ['multiple', 'range']
+  //     minDate: new Date(2022, 0, 1), // 最小日期
+  //     maxDate: new Date(2023, 0, 31), // 最大日期
+  //     maxRange: 5, // 最大可选天数
+  //   },
+  //   required: false,
+  // },
   // {
   // {
   //   key: 'email',
   //   key: 'email',
   //   value: '',
   //   value: '',
@@ -86,6 +86,17 @@ onMounted(() => {
   //   },
   //   },
   //   required: true,
   //   required: true,
   // },
   // },
+  {
+    key: 'id_code',
+    value: '',
+    label: '身份证号码',
+    placeholder: '请输入身份证号码',
+    component: '',
+    component_props: {
+      name: 'id_code'
+    },
+    required: true,
+  },
   // {
   // {
   //   key: 'age',
   //   key: 'age',
   //   value: '',
   //   value: '',