新增测试自定义表单校验控件

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     CheckboxField: typeof import('./src/components/CheckboxField/index.vue')['default']
     ContactField: typeof import('./src/components/ContactField/index.vue')['default']
     copy: typeof import('./src/components/DesField copy/index.vue')['default']
+    CustomField: typeof import('./src/components/CustomField/index.vue')['default']
     DatePickerField: typeof import('./src/components/DatePickerField/index.vue')['default']
     DateTimePickerField: typeof import('./src/components/DateTimePickerField/index.vue')['default']
     DesField: typeof import('./src/components/DesField/index.vue')['default']
@@ -26,6 +27,7 @@ declare module '@vue/runtime-core' {
     ImageUploaderField: typeof import('./src/components/ImageUploaderField/index.vue')['default']
     MarqueeField: typeof import('./src/components/MarqueeField/index.vue')['default']
     MultiRuleField: typeof import('./src/components/MultiRuleField/index.vue')['default']
+    MyComponent: typeof import('./src/components/CustomField/MyComponent.vue')['default']
     NameField: typeof import('./src/components/NameField/index.vue')['default']
     NoteField: typeof import('./src/components/NoteField/index.vue')['default']
     NumberField: typeof import('./src/components/NumberField/index.vue')['default']

+<template>
+  <div class="">
+    <van-field
+      v-model="value3"
+      placeholder="请输入手机号"
+    />
+  </div>
+</template>
+
+<script setup>
+import { inject, ref } from 'vue'
+import { useCustomFieldValue } from '@vant/use';
+
+// 获取父组件传值
+const props = inject('props');
+console.warn(props);
+
+const value3 = ref('');
+
+// 此处传入的值会替代 Field 组件内部的 value
+useCustomFieldValue(() => value3.value);
+
+</script>
+
+<style lang="less" scoped>
+
+</style>

+<!--
+ * @Date: 2023-03-28 13:40:24
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2023-03-28 15:38:27
+ * @FilePath: /data-table/src/components/CustomField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="custom-field-page">
+    <div class="label">{{ item.component_props.label }}</div>
+    <van-field :name="item.name" :rules="rules">
+      <template #input>
+        <my-component />
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { provide } from 'vue'
+import MyComponent from './MyComponent.vue';
+
+const props = defineProps({
+  item: Object,
+});
+
+// 注入子组件属性
+provide('props', props.item);
+// 规则校验
+const rules = [
+  {
+    required: true,
+    message: '请输入表单项',
+  },
+]
+</script>
+
+<style lang="less" scoped>
+.custom-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -30,6 +30,7 @@ import NoteField from '@/components/NoteField/index.vue';
 import NameField from '@/components/NameField/index.vue';
 import GenderField from '@/components/GenderField/index.vue';
 import AppointmentField from '@/components/AppointmentField/index.vue';
+import CustomField from '@/components/CustomField/index.vue';
 
 /**
  * 生成自定义组件类型
@@ -184,5 +185,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = AppointmentField;
     }
+    if (item.component_props.tag === 'custom') {
+      item.name = item.key;
+      item.component = CustomField;
+    }
   })
 }