vue3.0组合式API-useForm

vue3.0组合式API-useForm更多文章 前言 开始之前先简单介绍一下Form组件,Form组件是通过配置文件生成的表单,可以简单的理解为动态表单,通过数据生成,ok,开始我们今天的主题useForm 介绍 根据目前现有业务针对Fo

更多文章

前言

开始之前先简单介绍一下Form组件,Form组件是通过配置文件生成的表单,可以简单的理解为动态表单,通过数据生成,ok,开始我们今天的主题useForm

介绍

根据目前现有业务针对Form做逻辑层的封装,useForm需要和我们封装的Form配合使用,不满足需求时查漏补缺

基础使用

Form组件是ui层的封装,useForm就是配套的逻辑层,除了非常个性化的业务通过插槽处理外,其余的均是通过数据配置(formConfig)和逻辑层完成ui层的展现效果


<template>
  <Form
    ref="formRef"
    :formData="formData",
    :formConfig="formConfig"
  >
    <el-button @click="searchFormHandle">搜索</el-button>
  </Form>
</template>
<script>
import { ref } from '@vue/composition-api'
import Form from '@/components/form'
import useForm from '@/hooks/useForm'

export default {
  components: { Form },
  setup() {
    // ref
    const formRef = ref()
    // form
    const {
      formData,
      formConfig,
      submitHandle
    } = useForm({
      formRef,
      formData: { member: undefined, time: undefined },
      formConfig: [
        { type: 'input', key: 'member', label: '成员' },
        { type: 'datePicker', key: 'time', label: '时间', kind: 'daterange' },
      ]
    })
    // 搜索
    const searchFormHandle = () => submitHandle(() => console.log('可以开始调用接口了'))

    return {
      formRef,
      formData,
      formConfig,
      searchFormHandle
    }
  }
}

</script>

入参

formConfig配置,假设以inputNumber为例,可以配置min和max: { type: ‘inputNumber’, min: 0, max: 10 },Form组件的配置目前只有当前场景的配置,查漏补缺

参数 说明 类型 可选值 默认值
formRef form-ref VueComponent
formData 表单数据,与element-form绑定的model一样 Object
formConfig 表单展示配置,需要参考Form组件,与element各表单配置相同 Arrary
formRules 表单校验规则,具体参考element校验规则 Object

出参

此处抛出的formData、formConfig、formRules均为响应式数据

参数 说明 类型 可选值 默认值
formData 表单数据,与element-form绑定的model一样 Object
formConfig 表单展示配置,需要参考Form组件,与element各表单配置相同 Arrary
formRules 表单校验规则,具体参考element校验规则 Object
submitHandle 提交表单 Function:Promise(callback)
resetHandle 重置表单&校验(element-form-resetFields方法) Function
validateField 部分校验(element-form-validateField方法) Function(props: array/string)
clearValidate 清除校验(element-form-validateField方法) Function(props: array/string)
resetFormConfig 重置formConfig(重置为初始化传入的配置) Function
resetFormData 重置formData(重置为初始化传入formData) Function
setConfigs 更新整个formConfig Function(vals: Arrary)
setConfig 更新formConfig某项配置的属性状态 Function(key, attr, value)
getConfig 获取formConfig某一项 Function(key)
setFormItem 为formData某一项赋值 Function(key, value)
setFormRule 设置formRules某一项设置校验规则 Function(key, index, value)
setFormRuleAttr 设置formRules某一项某个状态 Function(key, index, attr, value)
loopFormConfig 遍历loopFormConfig Function(callback(item))
loopFormData 遍历loopFormData Function(callback(formData, key))

submitHandle既可以通过callback执行回调,也可以通过Promise形式调用


// callback
submitHandle(() => console.log('我是回调函数,校验通过则会执行'))
// promise
submitHandle().then(valid => valid && console.log('我是接口调用,校验通过则会执行'))

resetFormData主要是解决resetHandle无法达到的数据重置效果,通常在表单类数据回显时会对源数据进行操作,导致resetHandle无法达到想要的效果,resetFormData的作用就是解决这个问题

setConfig: 假设此时不同情况下要设置某个input的disabled状态


// id为1时disabled为true
setConfig('member', 'disabled', id === 1)

setFormRule: 通常配置非常多时会叫配置提到一个配置文件中,而当校验规则需要用到响应式数据formData时,静态的配置文件中无法拿到实时的响应式数据,则需通过setFormRule动态设置校验规则


setFormRule('pass', 1, {
    validator: (rule, value, callback) => {
      const { formData: { pass, rePass } } = formState
      if (creditAmount && orderAmount) {
        if (pass !== rePass) {
          callback(new Error('两次密码不一致'))
          return
        }
      }
      callback()
    },
    trigger: ['blur', 'change']
  }
)

setFormRuleAttr:动态的设置某一项校验或者不校验时


// id为1时必填,否则非必填
setFormRuleAttr('member', 0, 'required', id === 1)

loopFormConfig:编辑时全部展示input框,完成展示text


const kinds = { default: 'text', edit: 'input' }
const kind = 'edit'

loopFormConfig(item => { item.type = kinds[kind])

loopFormData:通常编辑回显时,接口返回的数据非常杂乱,可以通过loopFormData完成数据的回显


loopFormData((formData, key) => {
  if (!data[key]) return
  formData[key] = data[key]
})

源码


import { reactive, toRefs } from '@vue/composition-api'
import { deepCopy } from '@/utils/qjd'

/** * 场景:适用于所有表单类提交包括查询,配合components/qjd/form使用,目前组件仅有开发遇到的场景,缺啥补啥,根据实际场景扩展useForm * @param formRef form-ref * @param formData 初始化数据 * @param formConfig 表单配置 * @param formRules 校验规则 */

export default ({
  formRef,
  formData,
  formConfig,
  formRules
}) => {
  const state = reactive({
    formData: deepCopy(formData),
    formConfig: deepCopy(formConfig),
    formRules: deepCopy(formRules)
  })
  // 提交表单
  const submitHandle = async (callback = null) => {
    try {
      const { value: { submitHandle: forSubmit } } = formRef
      const valid = await forSubmit()
      valid && callback && callback(state.formData)
      return valid
    } catch (error) {
      console.log(`error: ${error}`)
    }
  }
  // 重置表单
  const resetHandle = () => formRef.value && formRef.value.resetHandle()
  // 校验表单部分字段
  const validateField = val => formRef.value && formRef.value.validateField(val)
  // 清除校验
  const clearValidate = val => formRef.value && formRef.value.clearValidate(val)
  // 查询formConfig-item
  const getConfig = key => state.formConfig.find(item => item.key === key)
  // 更新整个formConfig
  const setConfigs = vals => { state.formConfig = deepCopy(vals) }
  /** * @param key formConfig - key * @param attr formConfig - 属性 * @param value 设置的值 */
  const setConfig = (key, attr, value) => {
    if (!key || !attr) return
    const item = getConfig(key)
    if (!item) return
    item[attr] = value
  }
  // formData单个元素赋值
  const setFormItem = (key, value) => {
    if (!key) return
    state.formData[key] = value
  }
  // formRules单个属性配置变更
  const setFormRuleAttr = (key, index, attr, value) => {
    if (!key || !attr) return
    state.formRules[key][index][attr] = value
  }
  // formRules单个配置变更,针对需要动态设置校验规则 | 校验规则依赖于响应式的form数据
  const setFormRule = (key, index, value) => {
    if (!key) return
    state.formRules[key][index] = value
  }
  // 遍历formConfig,通过callbac处理数据
  const loopFormConfig = (callback) => state.formConfig.forEach(item => callback && callback(item))
  // 遍历formData,通过callbac处理数据
  const loopFormData = (callback) => Object.keys(state.formData).forEach(key => callback && callback(state.formData, key))
  // 重置formData
  const resetFormData = () => { state.formData = deepCopy(formData) }
  // 重置formConfig
  const resetFormConfig = () => { state.formConfig = deepCopy(formConfig) }

  return {
    submitHandle,
    resetHandle,
    validateField,
    clearValidate,
    setConfigs,
    setConfig,
    getConfig,
    setFormItem,
    setFormRuleAttr,
    setFormRule,
    loopFormConfig,
    loopFormData,
    resetFormData,
    resetFormConfig,
    ...toRefs(state)
  }
}

结语

form也是比较庞杂的一块,目前暂具功能如上,需要在业务开发中不断的完善

今天的文章vue3.0组合式API-useForm分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20955.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注