Explorar el Código

feat(cl-form-item): 支持根据规则自动判断必填状态

- 修改 required 属性类型为 Boolean | null,默认值为 null
- 引入 getRule 方法用于获取表单字段规则
- 新增计算属性 required,优先使用 props.required,否则根据规则判断
- 更新 showAsterisk 和 showMessage 计算逻辑,依赖新的 required 状态
- 修改 watch 监听对象为计算后的 required 属性
haibiao_gu hace 4 meses
padre
commit
53402579bf
Se han modificado 1 ficheros con 17 adiciones y 6 borrados
  1. 17 6
      uni_modules/cool-ui/components/cl-form-item/cl-form-item.uvue

+ 17 - 6
uni_modules/cool-ui/components/cl-form-item/cl-form-item.uvue

@@ -109,13 +109,13 @@ const props = defineProps({
 	},
 	// 是否必填
 	required: {
-		type: Boolean,
-		default: false
+		type: Boolean as PropType<boolean | null>,
+		default: null
 	}
 });
 
 // cl-form 上下文
-const { formRef, getError, getValue, validateField, addField, removeField, setRule } = useForm();
+const { formRef, getError, getValue, validateField, addField, removeField, setRule, getRule } = useForm();
 
 // 透传样式类型
 type PassThrough = {
@@ -149,9 +149,20 @@ const labelWidth = computed<string>(() => {
 	return props.labelWidth ?? formRef.value?.labelWidth ?? "120rpx";
 });
 
+// 计算是否必填
+const required = computed<boolean>(() => {
+	if (props.required !== null && props.required !== undefined) {
+		return props.required;
+	}
+
+	// 否则,根据规则自动判断
+	const rules = getRule(props.prop);
+	return rules.some(rule => rule.required === true);
+});
+
 // 是否显示必填星号
 const showAsterisk = computed<boolean>(() => {
-	if (!props.required) {
+	if (!required.value) {
 		return false;
 	}
 
@@ -160,7 +171,7 @@ const showAsterisk = computed<boolean>(() => {
 
 // 是否显示错误信息
 const showMessage = computed<boolean>(() => {
-	if (!props.required) {
+	if (!required.value) {
 		return false;
 	}
 
@@ -168,7 +179,7 @@ const showMessage = computed<boolean>(() => {
 });
 
 watch(
-	computed(() => props.required),
+	required, // 监听计算后的 required 属性
 	(val: boolean) => {
 		if (val) {
 			addField(props.prop, props.rules);