vue3+TS封装自定义hooks
vue3+ts项目封装自定义hooks
·
前言:后台管理系统大量表单中,填写表单提交的时候会有各种校验,类似下图
一。当提交时,会触发a-form的validateFields方法,该方法用于判断是否校验通过,该方法返回一个promise,如果校验通过会进入到then方法,不通过会进入到catch方法,同时会传出来一个error
/**
* @method 表单校验
* @returns Promise<Record<string, any> | errorMessageArrayType>
*/
async function formValidateFields(): Promise<Record<string, any> | errorMessageArrayType> {
return new Promise<Record<string, any> | errorMessageArrayType>(async (resolve, reject) => {
try {
await formRef.value.validateFields()
resolve(formState.value)
} catch (error: any) {
reject(error)
}
})
}
二。打印error发现,是这种数据结构,errorFields里面存了表单对应的name和rules,我们想实现的是根据errorFileds里面的errors信息 结合antd的message错误提醒用户,效果如下图
三。在validateFields方法的catch里,我们只需要遍历errorFields数组,再去遍历errorFields里面erros,同时每次遍历的时候使用message去错误提示即可,代码如下
/**
* @method 表单校验
* @returns Promise<Record<string, any> | errorMessageArrayType>
*/
async function formValidateFields(): Promise<Record<string, any> | errorMessageArrayType> {
return new Promise<Record<string, any> | errorMessageArrayType>(async (resolve, reject) => {
try {
await formRef.value.validateFields()
resolve(formState.value)
} catch (error: any) {
const { errorFields } = error
for (const item of errorFields) {
if (item?.errors?.length) {
for (const v of item.errors) {
globalProperties.$message.error(v)
// 此处加return是为了按顺序提示
return
}
}
}
reject(error)
}
})
}
四。把该方法抽成一个hooks,代码如下
目录:src/hooks/useErrorMessage.ts
import { getCurrentInstance } from 'vue'
import type { errorMessageArrayType } from '@/type/interface/errorMessage'
export default function useErrorMessage() {
const {
appContext: {
config: { globalProperties },
},
}: any = getCurrentInstance()
/**
* @method 表单必填项校验失败时使用error提示必填
* @param errorArray 必填字段与name等
*/
function alertError(errorArray: errorMessageArrayType) {
const { errorFields } = errorArray
for (const item of errorFields) {
if (item?.errors?.length) {
for (const v of item.errors) {
globalProperties.$message.error(v)
// 此处加return是为了按顺序提示
return
}
}
}
}
return {
alertError,
}
}
使用时代码如下:在 xx.vue里
<a-button type="primary" @click="handleSave"> 保存 </a-button>
import useErrorMessage from '@/hooks/useErrorMessage'
const { alertError } = useErrorMessage()
/**
* @method 保存新增
*/
async function handleSave() {
try {
// 校验表单正则
const formState = await wavesRuleFromRef.value.formValidateFields()
} catch (error: any) {
console.log('error', error)
alertError(error)
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)