blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Field): add error-message slot (#9634)

Browse Source
This commit is contained in:
neverland 2021-10-08 11:05:29 +08:00 committed by GitHub
parent 4b0b2a0da3
commit a9fedfed24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/vant/src/field/Field.tsx
View File

@ -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 (
<div class={bem('error-message', errorMessageAlign)}>{message}</div>
<div class={bem('error-message', errorMessageAlign)}>
{slot ? slot({ message }) : message}
</div>
);
}
};

17
packages/vant/src/field/README.md
View File

@ -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

17
packages/vant/src/field/README.zh-CN.md
View File

@ -358,14 +358,15 @@ fieldRef.value?.focus();
### Slots
| 名称 | 说明 |
| --- | --- |
| label | 自定义输入框左侧文本 |
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效。<br>在 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 | 自定义输入框最右侧的额外内容 | - |
## 主题定制

6
packages/vant/src/field/test/__snapshots__/index.spec.js.snap
View File

@ -13,6 +13,12 @@ exports[`should render colon when using colon prop 1`] = `
</div>
`;
exports[`should render error-message slot correctly 1`] = `
<div class="van-field__error-message">
Custom error
</div>
`;
exports[`should render extra slot correctly 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">

13
packages/vant/src/field/test/index.spec.js
View File

@ -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();
});