✨ feat(地址控件): 自定义表单钩子函数调整

+<template>
+  <div style="width: 100%;">
+    <van-field
+      v-model="fieldValue"
+      is-link
+      readonly
+      :required="props.component_props.required"
+      placeholder="请选择省市区"
+      @click="showPicker = true"
+      :border="show_address ? true : false"
+    />
+    <van-field
+      v-if="show_address"
+      v-model="address"
+      placeholder="请填写详细地址"
+      :border="false"
+    />
+    <van-divider />
+
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-area
+        v-model="props.city_code"
+        title=""
+        :area-list="areaList"
+        @confirm="onConfirm"
+        @cancel="showPicker = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { areaList } from "@vant/area-data";
+import { useCustomFieldValue } from '@vant/use';
+
+// 获取父组件传值
+const props = inject('props');
+const show_address = ref(!props.component_props.no_street)
+
+const address = ref("");
+const city_code = ref("");
+const showPicker = ref(false);
+let fieldValue = ref("");
+const result_value = computed(() => {
+  return {
+    address: fieldValue.value + ' ' + address.value,
+    city_code: city_code.value,
+    picker_value: fieldValue.value,
+    input_value: address.value
+  }
+})
+
+const onConfirm = ({ selectedOptions }) => {
+  fieldValue.value = selectedOptions.map((option) => option.text).join(" ");
+  city_code.value = selectedOptions[2]?.value;
+  showPicker.value = false;
+};
+
+// 此处传入的值会替代 Field 组件内部的 value
+useCustomFieldValue(() => result_value.value);
+</script>
+
+<style lang="less" scoped>
+
+</style>

 <!--
  * @Date: 2022-08-30 14:32:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-14 14:37:45
+ * @LastEditTime: 2023-03-29 16:18:53
  * @FilePath: /data-table/src/components/AreaPickerField/index.vue
  * @Description: 省市区选择控件
 -->
 <template>
   <div v-if="HideShow" class="area-picker-field">
-    <div class="label"><span v-if="item.component_props.required">&nbsp;*</span>{{ item.component_props.label }}</div>
-    <van-field
-      name="ignore"
-      v-model="fieldValue"
-      is-link
-      readonly
-      :required="item.component_props.required"
-      placeholder="请选择省市区"
-      :rules="item.rules"
-      @click="showPicker = true"
-      :border="show_address ? true : false"
-    />
-    <van-field
-      v-if="show_address"
-      name="ignore"
-      v-model="address"
-      placeholder="请填写详细地址"
-      @blur="onBlur"
-      :rules="item.rules"
-      :border="false"
-    />
-    <!-- <div
-      v-if="show_empty"
-      class="van-field__error-message"
-      style="padding: 0 1rem 1rem 1rem"
-    >
-      地址不能为空
-    </div> -->
-    <van-divider />
-
-    <van-popup v-model:show="showPicker" position="bottom">
-      <van-area
-        v-model="item.city_code"
-        title=""
-        :area-list="areaList"
-        @confirm="onConfirm"
-        @cancel="showPicker = false"
-      />
-    </van-popup>
+    <div class="label">
+      <span v-if="item.component_props.required">&nbsp;*</span>
+      {{ item.component_props.label }}
+    </div>
+    <van-field :name="item.key" :rules="rules" style="padding: 0;">
+      <template #input>
+        <my-component />
+      </template>
+    </van-field>
   </div>
 </template>
 
 <script setup>
-import { areaList } from "@vant/area-data";
+import MyComponent from './MyComponent.vue';
 
 const props = defineProps({
   item: Object,
 });
+// 注入子组件属性
+provide('props', props.item);
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
 })
-const emit = defineEmits(["active"]);
-const show_empty = ref(false);
-
-const show_address = ref(!props.item.component_props.no_street)
-
-const address = ref("");
-const city_code = ref("");
-const showPicker = ref(false);
-let fieldValue = ref("");
 
-const onConfirm = ({ selectedOptions }) => {
-  fieldValue.value = selectedOptions.map((option) => option.text).join(" ");
-  city_code.value = selectedOptions[2]?.value;
-  props.item.value = {
-    key: "area_picker",
-    filed_name: props.item.key,
-    value: {
-      address: fieldValue.value + ' ' + address.value,
-      city_code: city_code.value
-    },
-  };
-  emit("active", props.item.value);
-  showPicker.value = false;
-};
-
-const onBlur = () => {
-  props.item.value = {
-    key: "area_picker",
-    filed_name: props.item.key,
-    value: {
-      address: fieldValue.value + ' ' + address.value,
-      city_code: city_code.value
-    },
-  };
-  emit("active", props.item.value);
-}
-
-// 校验模块
-const validAreaPicker = () => {
-  // 必填项
-  if (props.item.component_props.required && !fieldValue.value) {
-    show_empty.value = true;
-  } else if (props.item.component_props.required && !address.value) {
-    show_empty.value = true;
+// 规则校验
+const required = props.item.component_props.required;
+const show_street = !props.item.component_props.no_street; // 显示详细地址
+const validator = (val) => {
+  if (required && show_street && (!val.picker_value || !val.input_value)) {
+    return false;
+  } else if (required && !show_street && !val.picker_value) {
+    return false;
   } else {
-    show_empty.value = false;
+    return true;
   }
-  return !show_empty.value;
 };
-
-defineExpose({ validAreaPicker });
+// 错误提示文案
+const validatorMessage = (val, rule) => {
+  if (required && show_street && (!val.picker_value || !val.input_value)) {
+    return "必填项不能为空";
+  } else if (required && !show_street && !val.picker_value) {
+    return "必填项不能为空";
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
 </script>
 
 <style lang="less" scoped>
@@ -125,4 +68,8 @@ defineExpose({ validAreaPicker });
   }
 }
 
+:deep(.van-field__error-message) {
+  padding-left: 1rem;
+}
+
 </style>