diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 6b98fbec1..d1b3acf5d 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -469,9 +469,12 @@ export default defineComponent({ const message = props.errorMessage || state.validateMessage; if (message) { + const slot = slots['error-message']; const errorMessageAlign = getProp('errorMessageAlign'); return ( -
{message}
+
+ {slot ? slot({ message }) : message} +
); } }; diff --git a/packages/vant/src/field/README.md b/packages/vant/src/field/README.md index a042f7ccb..b7cc4216a 100644 --- a/packages/vant/src/field/README.md +++ b/packages/vant/src/field/README.md @@ -339,14 +339,15 @@ fieldRef.value?.focus(); ### Slots -| Name | Description | -| ---------- | --------------------------- | -| label | Custom label | -| input | Custom input | -| left-icon | Custom left icon | -| right-icon | Custom right icon | -| button | Insert button | -| extra | Custom content on the right | +| Name | Description | SlotProps | +| ---------------------- | --------------------------- | --------------------- | +| label | Custom label | - | +| input | Custom input | - | +| left-icon | Custom left icon | - | +| right-icon | Custom right icon | - | +| button | Insert button | - | +| error-message `v3.2.5` | Custom error message | _{ message: string }_ | +| extra | Custom content on the right | - | ## Theming diff --git a/packages/vant/src/field/README.zh-CN.md b/packages/vant/src/field/README.zh-CN.md index b1d842813..e0c303b4c 100644 --- a/packages/vant/src/field/README.zh-CN.md +++ b/packages/vant/src/field/README.zh-CN.md @@ -358,14 +358,15 @@ fieldRef.value?.focus(); ### Slots -| 名称 | 说明 | -| --- | --- | -| label | 自定义输入框左侧文本 | -| input | 自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效。
在 Form 组件进行表单校验时,会使用 input 插槽中子组件的 `value`,而不是 Field 组件的 `value`。 | -| left-icon | 自定义输入框头部图标 | -| right-icon | 自定义输入框尾部图标 | -| button | 自定义输入框尾部按钮 | -| extra | 自定义输入框最右侧的额外内容 | +| 名称 | 说明 | 参数 | +| --- | --- | --- | +| label | 自定义输入框左侧文本 | - | +| input | 自定义输入框,使用此插槽后,与输入框相关的属性和事件将失效 | - | +| left-icon | 自定义输入框头部图标 | - | +| right-icon | 自定义输入框尾部图标 | - | +| button | 自定义输入框尾部按钮 | - | +| error-message `v3.2.5` | 自定义底部错误提示文案 | _{ message: string }_ | +| extra | 自定义输入框最右侧的额外内容 | - | ## 主题定制 diff --git a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap index 3fc01ab39..43b62eb8f 100644 --- a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap +++ b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap @@ -13,6 +13,12 @@ exports[`should render colon when using colon prop 1`] = ` `; +exports[`should render error-message slot correctly 1`] = ` +
+ Custom error +
+`; + exports[`should render extra slot correctly 1`] = `
diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js index 7aae711c3..dd527cc83 100644 --- a/packages/vant/src/field/test/index.spec.js +++ b/packages/vant/src/field/test/index.spec.js @@ -467,3 +467,16 @@ test('should render id prop correctly', async () => { expect(wrapper.find('input').attributes('id')).toEqual('my-id'); expect(wrapper.find('label').attributes('for')).toEqual('my-id'); }); + +test('should render error-message slot correctly', async () => { + const wrapper = mount(Field, { + props: { + errorMessage: 'error', + }, + slots: { + 'error-message': ({ message }) => `Custom ${message}`, + }, + }); + + expect(wrapper.find('.van-field__error-message').html()).toMatchSnapshot(); +});