feat(cl-form-item): 支持根据规则自动判断必填状态
- 修改 required 属性类型为 Boolean | null,默认值为 null - 引入 getRule 方法用于获取表单字段规则 - 新增计算属性 required,优先使用 props.required,否则根据规则判断 - 更新 showAsterisk 和 showMessage 计算逻辑,依赖新的 required 状态 - 修改 watch 监听对象为计算后的 required 属性
This commit is contained in:
@@ -109,13 +109,13 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
// 是否必填
|
// 是否必填
|
||||||
required: {
|
required: {
|
||||||
type: Boolean,
|
type: Boolean as PropType<boolean | null>,
|
||||||
default: false
|
default: null
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// cl-form 上下文
|
// cl-form 上下文
|
||||||
const { formRef, getError, getValue, validateField, addField, removeField, setRule } = useForm();
|
const { formRef, getError, getValue, validateField, addField, removeField, setRule, getRule } = useForm();
|
||||||
|
|
||||||
// 透传样式类型
|
// 透传样式类型
|
||||||
type PassThrough = {
|
type PassThrough = {
|
||||||
@@ -149,9 +149,20 @@ const labelWidth = computed<string>(() => {
|
|||||||
return props.labelWidth ?? formRef.value?.labelWidth ?? "120rpx";
|
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>(() => {
|
const showAsterisk = computed<boolean>(() => {
|
||||||
if (!props.required) {
|
if (!required.value) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -160,7 +171,7 @@ const showAsterisk = computed<boolean>(() => {
|
|||||||
|
|
||||||
// 是否显示错误信息
|
// 是否显示错误信息
|
||||||
const showMessage = computed<boolean>(() => {
|
const showMessage = computed<boolean>(() => {
|
||||||
if (!props.required) {
|
if (!required.value) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -168,7 +179,7 @@ const showMessage = computed<boolean>(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
computed(() => props.required),
|
required, // 监听计算后的 required 属性
|
||||||
(val: boolean) => {
|
(val: boolean) => {
|
||||||
if (val) {
|
if (val) {
|
||||||
addField(props.prop, props.rules);
|
addField(props.prop, props.rules);
|
||||||
|
|||||||
Reference in New Issue
Block a user