first

components/JeepayFormItem/JeepayFormItem.vue

@@ -0,0 +1,71 @@
+<template>
+	<view>
+		{{props.label}} : <slot></slot>
+		
+		<view v-if="props.showErrorText && vdata.errorMsg">{{ vdata.errorMsg }}</view>
+	</view>
+	
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, onUnmounted, provide, computed, inject, watch } from 'vue'
+
+
+const jeepayFormInject = inject("jeepayForm")
+const jeepayForm = jeepayFormInject.value
+
+const jeepayErrorListByTextInject = inject("jeepayErrorListByText")
+
+onMounted(() => {
+	jeepayForm.itemSign(props.name)
+})
+
+onUnmounted(() => {
+	
+	jeepayForm.unItemSign(props.name)
+})
+
+// 定义组件参数 
+const props = defineProps({
+	
+  name: { type: String },
+  
+  label: { type: String },
+  
+  // 是否显示 错误信息占位
+  showErrorText: { type: Boolean, default: true },
+  
+})
+
+const vdata = reactive({
+	
+	errorMsg: null, // 错误提示信息
+	
+})
+
+// 关于本条的数据 
+function changeItemErrorMsg(itemErrorListByText){
+	
+	vdata.errorMsg = null;
+	if(itemErrorListByText && itemErrorListByText.length > 0){
+		vdata.errorMsg = itemErrorListByText[0].errorMsg
+	}
+}
+
+
+
+watch(() => jeepayErrorListByTextInject.value, (newVal, oldVal) => {
+	
+	if(!newVal){
+		return false;
+	}
+	changeItemErrorMsg(newVal.filter(r=> r.name == props.name))
+  }
+)
+
+// 错误信息的传递 
+provide('jeepayFormItemErrorMsg', computed( ()=> vdata.errorMsg ) )
+</script>
+
+<style>
+</style>