devElValidateForm 触发ElForm表单校验
用于特殊情况下form表单校验不会自动触发时使用。
常见的场景有:我们封装了一个组件,会双向绑定值,当我们放到el-form表单中后最开始做了校验,提示必填项之后,当组件绑定上值后,提示警告依然存在。这个时候就可以用 devElValidateForm
来解决。
devElValidateForm()
支持传递两个参数 change
blur
分别代表
change
数据发生改变时触发blur
光标离焦时触发
需注意要传递的参数要和 rules
中的 trigger
对应。
typescript
const rules = ref({
imageUrl: [
{ required: true, message: '请上传图片', trigger: 'change' },
]
})
使用示例
vue
<script setup lang="ts">
import { initDevElValidateForm, devElValidateForm} from "devecoui-plus";
// 首先初始化一下方法
initDevElValidateForm();
const emit = defineEmits(['update:modelValue']);
// 比如我们这个方法会更新v-model
const change = (val:string)=>{
emit('update:modelValue',val);
// 更新数据后再使用 devElValidateForm 来提示el-form组件重新校验
devElValidateForm('change');
}
</script>