vue-hook-form使用详解

// 这里使用在main.js中全局注册来示例import vue from 'vue'import hookForm from 'vue-hook-form'// 配置全局form表单序列化之前的hookhookForm.beforeSerialize = (vm, next) => { // vm: 对应的hookForm vm实例 // next：继续执行 // 你可以在此处执行表单校验}// 配置全局form提交前的hookhookForm.onSubmit = request => { // request：包含了本次请求的基本信息 // 你可以在此处执行表单校验或使用ajax来提交本次请求}vue.component('hook-form', hookForm)

{ url: '请求地址', body: '请求参数', method: '请求方法', vm: '对应的hookForm vm实例'}

<template> <hook-form action="users" :on-submit="onSubmit" :before-serialize="beforeSerialize"> <input name="name"> <input name="age"> <button>提交</button> </hook-form></template><script> export default { methods: {  // 局部hook  beforeSerialize (vm, next) {  // next：继续执行  // 你可以在此处执行表单校验  },  onSubmit (request) {  // request：包含了本次请求的基本信息  // 你可以在此处执行表单校验或使用ajax来提交本次请求  } } }</script>

hookForm.onSubmit = request => { // request.body为url字符串格式 // 形如：name=张三&age=18}// 配置Request.body为json格式hookForm.json = truehookForm.onSubmit = request => { // request.body为json格式}

hookForm.onSubmit = request => { // 禁止form提交 request.vm.disabled = true // 在ajax请求或其他相关操作之后再释放禁用。 doSomeThing() .then(() => {  request.vm.disabled = false })}