feat(form): 为form组件的validate方法的返回添加类型声明 (#389)

Caffeine19 · xiaohe0601 · web-flow · commit b3e2f3b6e93f · 2024-08-05T17:27:17.000+08:00
* feat(form): 为form组件的validate方法的返回添加类型声明

---------

Co-authored-by: 小何同学 &lt;59353463+xiaohe0601@users.noreply.github.com&gt;
diff --git a/docs/components/dentry/form.md b/docs/components/dentry/form.md
@@ -65,9 +65,11 @@ export default {
 </template>
 <script lang="ts">
 import { ref,reactive } from 'vue';
+import type { FormInst } from 'nutui-uniapp'
+
 export default {
   setup(){
-    const dynamicRefForm = ref<any>(null);
+    const dynamicRefForm = ref<FormInst | null>(null);
     const dynamicForm = {
       state: reactive({
         name: '',
@@ -79,7 +81,7 @@ export default {
 
       methods: {
         submit() {
-          dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
+          dynamicRefForm.value?.validate().then(({ valid, errors }) => {
             if (valid) {
               console.log('success', dynamicForm);
             } else {
@@ -89,7 +91,7 @@ export default {
           });
         },
         reset() {
-          dynamicRefForm.value.reset();
+          dynamicRefForm.value?.reset();
         },
         remove() {
           dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
@@ -117,6 +119,7 @@ export default {
 ```vue
 <script lang="ts">
 import { reactive, ref } from 'vue'
+import type { FormInst } from 'nutui-uniapp'
 
 export default {
   setup() {
@@ -129,22 +132,22 @@ export default {
     const validate = (item: any) => {
       console.log(item)
     }
-    const ruleForm = ref<any>(null)
+    const ruleForm = ref<FormInst | null>(null);
 
     const submit = () => {
-      ruleForm.value.validate().then(({ valid, errors }: any) => {
+      ruleForm.value?.validate().then(({ valid, errors }) => {
         if (valid)
           console.log('success', formData)
         else
           console.log('error submit!!', errors)
       })
     }
     const reset = () => {
-      ruleForm.value.reset()
+      ruleForm.value?.reset()
     }
     // 失去焦点校验
     const customBlurValidate = (prop: string) => {
-      ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
+      ruleForm.value?.validate(prop).then(({ valid, errors }) => {
         if (valid)
           console.log('success', formData)
         else
diff --git a/example/src/manifest.json b/example/src/manifest.json
@@ -1 +1 @@
-{ "name": "NutUi", "appid": "__UNI__D989E4B", "description": "", "versionName": "1.0.0", "versionCode": "100", "transformPx": false, "app-plus": { "usingComponents": true, "nvueStyleCompiler": "uni-app", "compilerVersion": 3, "splashscreen": { "alwaysShowBeforeRender": true, "waiting": true, "autoclose": true, "delay": 0 }, "modules": {}, "distribute": { "android": { "permissions": [] }, "ios": { "dSYMs": false }, "sdkConfigs": { "ad": {} } }, "darkmode": true, "themeLocation": "theme.json" }, "quickapp": {}, "mp-weixin": { "appid": "wxd4e6c25454525507", "setting": { "urlCheck": false, "es6": true, "minified": true, "postcss": true }, "usingComponents": true, "libVersion": "3.0.0", "lazyCodeLoading": "requiredComponents", "darkmode": true, "themeLocation": "theme.json" }, "mp-alipay": { "usingComponents": true, "appid": "wxd4e6c25454525507", "setting": { "urlCheck": false, "es6": true, "minified": true, "postcss": true }, "lazyCodeLoading": "requiredComponents", "darkmode": true, "themeLocation": "theme.json" }, "mp-baidu": { "usingComponents": true }, "mp-toutiao": { "usingComponents": true }, "uniStatistics": { "enable": false }, "vueVersion": "3", "h5": { "darkmode": true, "themeLocation": "theme.json" } }
+{"name":"NutUi","appid":"__UNI__D989E4B","description":"","versionName":"1.0.0","versionCode":"100","transformPx":false,"app-plus":{"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"splashscreen":{"alwaysShowBeforeRender":true,"waiting":true,"autoclose":true,"delay":0},"modules":{},"distribute":{"android":{"permissions":[]},"ios":{"dSYMs":false},"sdkConfigs":{"ad":{}}},"darkmode":true,"themeLocation":"theme.json"},"quickapp":{},"mp-weixin":{"appid":"wxd4e6c25454525507","setting":{"urlCheck":false,"es6":true,"minified":true,"postcss":true},"usingComponents":true,"libVersion":"3.0.0","lazyCodeLoading":"requiredComponents","darkmode":true,"themeLocation":"theme.json"},"mp-alipay":{"usingComponents":true,"appid":"wxd4e6c25454525507","setting":{"urlCheck":false,"es6":true,"minified":true,"postcss":true},"lazyCodeLoading":"requiredComponents","darkmode":true,"themeLocation":"theme.json"},"mp-baidu":{"usingComponents":true},"mp-toutiao":{"usingComponents":true},"uniStatistics":{"enable":false},"vueVersion":"3","h5":{"darkmode":true,"themeLocation":"theme.json"}}
diff --git a/example/src/pages/demo/dentry/form/index.vue b/example/src/pages/demo/dentry/form/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
-import type { FormItemRule, FormItemRuleWithoutValidator } from 'nutui-uniapp'
+import type { FormInst, FormItemRule, FormItemRuleWithoutValidator } from 'nutui-uniapp'
 
 /* eslint-disable no-console */
 const formData = reactive({
@@ -15,7 +15,7 @@ const basicData = reactive({
   time: '',
   address: '',
 })
-const dynamicRefForm = ref<any>(null)
+const dynamicRefForm = ref<FormInst | null>(null)
 const dynamicForm = {
   state: reactive({
     name: '',
@@ -27,15 +27,15 @@ const dynamicForm = {
 
   methods: {
     submit() {
-      dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
+      dynamicRefForm.value?.validate().then(({ valid, errors }) => {
         if (valid)
           console.log('success', dynamicForm)
         else
           console.log('error submit!!', errors)
       })
     },
     reset() {
-      dynamicRefForm.value.reset()
+      dynamicRefForm.value?.reset()
     },
     remove() {
       dynamicForm.state.time.splice(dynamicForm.state.time.length - 1, 1)
@@ -112,22 +112,22 @@ const addressModule = reactive({
   },
 })
 
-const ruleForm = ref<any>(null)
+const ruleForm = ref<FormInst | null>(null)
 
 function submit() {
-  ruleForm.value.validate().then(({ valid, errors }: any) => {
+  ruleForm.value?.validate().then(({ valid, errors }) => {
     if (valid)
       console.log('success', formData)
     else
       console.log('error submit!!', errors)
   })
 }
 function reset() {
-  ruleForm.value.reset()
+  ruleForm.value?.reset()
 }
 // 失去焦点校验
 function customBlurValidate(prop: string) {
-  ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
+  ruleForm.value?.validate(prop).then(({ valid, errors }) => {
     if (valid)
       console.log('success', formData)
     else
diff --git a/packages/nutui/components/form/form.vue b/packages/nutui/components/form/form.vue
@@ -144,7 +144,7 @@ async function checkRule(item: FormRule): Promise<ErrorMessage | boolean> {
  * @param customProp 指定校验，用于用户自定义场景时触发，例如 blur、change 事件
  * @returns
  */
-function validate(customProp = '') {
+function validate(customProp = ''): Promise<{ valid: boolean, errors: ErrorMessage[] }> {
   return new Promise((resolve, reject) => {
     try {
       const task = findFormItem(internalChildren?.map(child => child.vnode))
diff --git a/packages/nutui/components/form/types.ts b/packages/nutui/components/form/types.ts
@@ -26,7 +26,7 @@ export interface FormInst {
   /**
    * @description 用户主动触发校验，用于用户自定义场景时触发，例如 `blur`、`change` 事件 | 同 `FormItem prop` 值,不传值会校验全部 `Rule`
    */
-  validate: (customProp?: any) => Promise<any>
+  validate: (customProp?: any) => Promise<{ valid: boolean, errors: ErrorMessage[] }>
 }
 
 export type FormLabelPosition = FormItemLabelPosition
diff --git a/packages/nutui/components/invoice/invoice.vue b/packages/nutui/components/invoice/invoice.vue
@@ -30,7 +30,7 @@ function init() {
 }
 
 function submitFun() {
-  formRef.value?.validate().then(({ valid, errors }: any) => {
+  formRef.value?.validate().then(({ valid, errors }) => {
     emit('onSubmit', valid, errors)
   })
 }

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-{ "name": "NutUi", "appid": "__UNI__D989E4B", "description": "", "versionName": "1.0.0", "versionCode": "100", "transformPx": false, "app-plus": { "usingComponents": true, "nvueStyleCompiler": "uni-app", "compilerVersion": 3, "splashscreen": { "alwaysShowBeforeRender": true, "waiting": true, "autoclose": true, "delay": 0 }, "modules": {}, "distribute": { "android": { "permissions": [] }, "ios": { "dSYMs": false }, "sdkConfigs": { "ad": {} } }, "darkmode": true, "themeLocation": "theme.json" }, "quickapp": {}, "mp-weixin": { "appid": "wxd4e6c25454525507", "setting": { "urlCheck": false, "es6": true, "minified": true, "postcss": true }, "usingComponents": true, "libVersion": "3.0.0", "lazyCodeLoading": "requiredComponents", "darkmode": true, "themeLocation": "theme.json" }, "mp-alipay": { "usingComponents": true, "appid": "wxd4e6c25454525507", "setting": { "urlCheck": false, "es6": true, "minified": true, "postcss": true }, "lazyCodeLoading": "requiredComponents", "darkmode": true, "themeLocation": "theme.json" }, "mp-baidu": { "usingComponents": true }, "mp-toutiao": { "usingComponents": true }, "uniStatistics": { "enable": false }, "vueVersion": "3", "h5": { "darkmode": true, "themeLocation": "theme.json" } }
	`1`	+{"name":"NutUi","appid":"__UNI__D989E4B","description":"","versionName":"1.0.0","versionCode":"100","transformPx":false,"app-plus":{"usingComponents":true,"nvueStyleCompiler":"uni-app","compilerVersion":3,"splashscreen":{"alwaysShowBeforeRender":true,"waiting":true,"autoclose":true,"delay":0},"modules":{},"distribute":{"android":{"permissions":[]},"ios":{"dSYMs":false},"sdkConfigs":{"ad":{}}},"darkmode":true,"themeLocation":"theme.json"},"quickapp":{},"mp-weixin":{"appid":"wxd4e6c25454525507","setting":{"urlCheck":false,"es6":true,"minified":true,"postcss":true},"usingComponents":true,"libVersion":"3.0.0","lazyCodeLoading":"requiredComponents","darkmode":true,"themeLocation":"theme.json"},"mp-alipay":{"usingComponents":true,"appid":"wxd4e6c25454525507","setting":{"urlCheck":false,"es6":true,"minified":true,"postcss":true},"lazyCodeLoading":"requiredComponents","darkmode":true,"themeLocation":"theme.json"},"mp-baidu":{"usingComponents":true},"mp-toutiao":{"usingComponents":true},"uniStatistics":{"enable":false},"vueVersion":"3","h5":{"darkmode":true,"themeLocation":"theme.json"}}
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export interface FormInst {`
`26`	`26`	`/**`
`27`	`27`	* @description 用户主动触发校验，用于用户自定义场景时触发，例如 `blur`、`change` 事件 \| 同 `FormItem prop` 值,不传值会校验全部 `Rule`
`28`	`28`	`*/`
`29`		`- validate: (customProp?: any) => Promise<any>`
	`29`	`+ validate: (customProp?: any) => Promise<{ valid: boolean, errors: ErrorMessage[] }>`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`export type FormLabelPosition = FormItemLabelPosition`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ function init() {`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`function submitFun() {`
`33`		`- formRef.value?.validate().then(({ valid, errors }: any) => {`
	`33`	`+ formRef.value?.validate().then(({ valid, errors }) => {`
`34`	`34`	`emit('onSubmit', valid, errors)`
`35`	`35`	`})`
`36`	`36`	`}`