Skip to content

Commit 5915922

Browse files
authored
feat: ✨ form表单新增errorType错误提示类型 (#487)
1 parent 3698e30 commit 5915922

File tree

3 files changed

+89
-2
lines changed

3 files changed

+89
-2
lines changed

docs/component/form.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,78 @@ function handleSubmit1() {
8383
}
8484
```
8585

86+
:::
87+
88+
## 校验错误提示方式
89+
90+
1. `message`:默认为输入框下方用文字进行提示
91+
2. `toast`:以"toast"提示的方式弹出错误信息,每次只弹出最前面的那个表单域的错误信息
92+
3. `none`:不会进行任何提示
93+
94+
::: details 错误提示方式
95+
::: code-group
96+
97+
```html [vue]
98+
<wd-form ref="form" :model="model" :errorType="errorType">
99+
<wd-cell-group border>
100+
<wd-input
101+
label="用户名"
102+
label-width="100px"
103+
prop="value1"
104+
clearable
105+
v-model="model.value1"
106+
placeholder="请输入用户名"
107+
:rules="[{ required: true, message: '请填写用户名' }]"
108+
/>
109+
<wd-input
110+
label="密码"
111+
label-width="100px"
112+
prop="value2"
113+
show-password
114+
clearable
115+
v-model="model.value2"
116+
placeholder="请输入密码"
117+
:rules="[{ required: true, message: '请填写密码' }]"
118+
/>
119+
</wd-cell-group>
120+
<view class="footer">
121+
<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
122+
</view>
123+
</wd-form>
124+
```
125+
126+
```typescript [typescript]
127+
<script lang="ts" setup>
128+
const { success: showSuccess } = useToast()
129+
const errorType = ref<string>('message')
130+
const model = reactive<{
131+
value1: string
132+
value2: string
133+
}>({
134+
value1: '',
135+
value2: ''
136+
})
137+
138+
const form = ref()
139+
140+
function handleSubmit1() {
141+
form.value
142+
.validate()
143+
.then(({ valid, errors }) => {
144+
if (valid) {
145+
showSuccess({
146+
msg: '校验通过'
147+
})
148+
}
149+
})
150+
.catch((error) => {
151+
console.log(error, 'error')
152+
})
153+
}
154+
</script>
155+
```
156+
157+
86158
:::
87159

88160
## 校验规则
@@ -849,6 +921,7 @@ function handleIconClick() {
849921
| model | 表单数据对象 | `Record<string, any>` | - | - | 0.2.0 |
850922
| rules | 表单验证规则 | `FormRules` | - | - | 0.2.0 |
851923
| resetOnChange | 表单数据变化时是否重置表单提示信息(设置为false时需要开发者单独对变更项进行校验) | `boolean` | - | `true` | 0.2.16 |
924+
| errorType | 校验错误提示方式 | `toast/message/none` | - | `message` | $LOWEST_VERSION$ |
852925

853926
### FormItemRule 数据结构
854927

src/uni_modules/wot-design-uni/components/wd-form/types.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,14 @@ export const formProps = {
5656
/**
5757
* 是否在输入时重置表单校验信息
5858
*/
59-
resetOnChange: makeBooleanProp(true)
59+
resetOnChange: makeBooleanProp(true),
60+
/**
61+
* 错误提示类型
62+
*/
63+
errorType: {
64+
type: String as PropType<'toast' | 'message' | 'none'>,
65+
default: 'message'
66+
}
6067
}
6168
export type FormProps = ExtractPropTypes<typeof formProps>
6269

src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<view :class="`wd-form ${customClass}`" :style="customStyle">
33
<slot></slot>
4+
<wd-toast v-if="props.errorType === 'toast'" selector="wd-form-toast" />
45
</view>
56
</template>
67

@@ -19,8 +20,10 @@ export default {
1920
import { reactive, watch } from 'vue'
2021
import { deepClone, getPropByPath, isDef, isPromise } from '../common/util'
2122
import { useChildren } from '../composables/useChildren'
23+
import { useToast } from '../wd-toast'
2224
import { type FormRules, FORM_KEY, type ErrorMessage, formProps, type FormExpose } from './types'
2325
26+
const toast = useToast('wd-form-toast')
2427
const props = defineProps(formProps)
2528
2629
const { children, linkChildren } = useChildren(FORM_KEY)
@@ -148,7 +151,11 @@ function getMergeRules() {
148151
}
149152
150153
function showMessage(errorMsg: ErrorMessage) {
151-
if (errorMsg.message) {
154+
if (!errorMsg.message) return
155+
156+
if (props.errorType === 'toast') {
157+
toast.show(errorMsg.message)
158+
} else if (props.errorType === 'message') {
152159
errorMessages[errorMsg.prop] = errorMsg.message
153160
}
154161
}

0 commit comments

Comments
 (0)