element plus自定义组件表单校验
方式一：
import { formContextKey, formItemContextKey } from "element-plus";// 获取 el-form 组件上下文
const formContext = inject(formContextKey, void 0);
// 获取 el-form-item 组件上下文
const formItemContext = inject(formItemContextKey, void 0);formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);方式二：
// 子组件核心流程
import { useFormItem } from "element-plus";
const { formItem } = useFormItem();
const emit = defineEmits(["update:value"]);const content = computed({get() {return props.value;},set(v: string) {// 同步父组件值emit("update:value", v);// 触发父组件定义的rulesformItem?.validate?.("blur").catch(err => {console.log(err);});}
});// 父组件 rules
<el-form-item label="回复内容" prop="content" :rules="requiredRules"><!-- 父组件调用 --><tinyMce v-model:value="form.content"></tinyMce>
</el-form-item>const requiredRules = [{ required: true, message: "请填写", trigger: "blur" }];element ui 自定义组件校验方式，详见以下链接地址
使用element Form 自带校验功能，实现上传控件的校验_element form 校验mixin-CSDN博客
ant design vue 1.x 自定义组件校验方式，详见以下链接ant design vue1.x 自定义校验_1.x ant-design-vue date-range-picker 校验-CSDN博客