Element Plus 表单触发自定义组件效验规则:trigger

5,274 阅读1分钟

element-plus 2.x

import { nextTick } from 'vue'
import { useFormItem } from 'element-plus'

//  触发el-form-item的校验事件 trigger
export function useTrigger () {
  const { formItem } = useFormItem() // form formItem
  const emitTrigger = (value: any) => {
    if (formItem) {
      nextTick(() => {
        formItem.validate('blur') // 触发校验
        formItem.validate('change') // 触发校验
      })
    }
  }
  return { formItem, emitTrigger }
}

element-plus 1.x-beta

import { inject } from 'vue'

//  触发el-form-item的校验事件 trigger
export function useTrigger () {
  const elFormItem: any = inject('elFormItem')
  const emitTrigger = (value: any) => {
    if (elFormItem?.formItemMitt?.emit) {
      elFormItem.formItemMitt.emit('el.form.blur', value)
      elFormItem.formItemMitt.emit('el.form.change', value)
    }
  }
  return { elFormItem, emitTrigger }
}

在自定义组件中使用

<script lang="ts">
import { useTrigger } from '@/utils/validatorRules'
export default defineComponent({
  emits: ['update:modelValue'],
  setup (props, { emit }) {
    const { emitTrigger } = useTrigger()
    const change = (key: string, e?: any) => {
      emit('update:modelValue', e)
      emitTrigger(e)
    }
    return {
      change,
    }
  }
})
</script>