mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 17:48:34 +08:00
parent
c87dc03b1e
commit
b9f46ba0da
@ -843,6 +843,7 @@ function handleIconClick() {
|
|||||||
| ----- | ------------ | --------------------- | ------ | ------ | -------- |
|
| ----- | ------------ | --------------------- | ------ | ------ | -------- |
|
||||||
| model | 表单数据对象 | `Record<string, any>` | - | - | 0.2.0 |
|
| model | 表单数据对象 | `Record<string, any>` | - | - | 0.2.0 |
|
||||||
| rules | 表单验证规则 | `FormRules` | - | - | 0.2.0 |
|
| rules | 表单验证规则 | `FormRules` | - | - | 0.2.0 |
|
||||||
|
| resetOnChange | 表单数据变化时是否重置表单提示信息(设置为false时需要开发者单独对变更项进行校验) | `boolean` | - | `true` | 0.2.16 |
|
||||||
|
|
||||||
### FormItemRule 数据结构
|
### FormItemRule 数据结构
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<page-wraper>
|
<page-wraper>
|
||||||
<wd-form ref="form" :model="model">
|
<wd-form ref="form" :model="model" :reset-on-change="false">
|
||||||
<wd-cell-group border>
|
<wd-cell-group border>
|
||||||
<wd-input
|
<wd-input
|
||||||
label="用户名"
|
label="用户名"
|
||||||
|
|||||||
@ -111,7 +111,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||||
import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
|
import { isArray } from '@/uni_modules/wot-design-uni/components/common/util'
|
||||||
import { FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
|
import { type FormRules } from '@/uni_modules/wot-design-uni/components/wd-form/types'
|
||||||
import { areaData } from '@/utils/area'
|
import { areaData } from '@/utils/area'
|
||||||
import { reactive, ref } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
|
|
||||||
|
|||||||
@ -26,12 +26,15 @@ interface Props {
|
|||||||
model: Record<string, any>
|
model: Record<string, any>
|
||||||
// 表单验证规则
|
// 表单验证规则
|
||||||
rules?: FormRules
|
rules?: FormRules
|
||||||
|
// 是否在输入时重置表单校验信息
|
||||||
|
resetOnChange?: boolean
|
||||||
customClass?: string
|
customClass?: string
|
||||||
customStyle?: string
|
customStyle?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
rules: () => ({}),
|
rules: () => ({}),
|
||||||
|
resetOnChange: true,
|
||||||
customClass: '',
|
customClass: '',
|
||||||
customStyle: ''
|
customStyle: ''
|
||||||
})
|
})
|
||||||
@ -44,7 +47,9 @@ linkChildren({ props, errorMessages: errorMessages })
|
|||||||
watch(
|
watch(
|
||||||
() => props.model,
|
() => props.model,
|
||||||
() => {
|
() => {
|
||||||
clearMessage()
|
if (props.resetOnChange) {
|
||||||
|
clearMessage()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true, deep: true }
|
{ immediate: true, deep: true }
|
||||||
)
|
)
|
||||||
@ -129,6 +134,14 @@ async function validate(prop?: string): Promise<{ valid: boolean; errors: ErrorM
|
|||||||
showMessage(error)
|
showMessage(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (valid) {
|
||||||
|
if (prop) {
|
||||||
|
clearMessage(prop)
|
||||||
|
} else {
|
||||||
|
clearMessage()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
valid,
|
valid,
|
||||||
errors
|
errors
|
||||||
@ -156,10 +169,14 @@ function showMessage(errorMsg: ErrorMessage) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearMessage() {
|
function clearMessage(prop?: string) {
|
||||||
Object.keys(errorMessages).forEach((key) => {
|
if (prop) {
|
||||||
errorMessages[key] = ''
|
errorMessages[prop] = ''
|
||||||
})
|
} else {
|
||||||
|
Object.keys(errorMessages).forEach((key) => {
|
||||||
|
errorMessages[key] = ''
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset() {
|
function reset() {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user