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(Calendar): add confirm-text slot (#9689)

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

11
packages/vant/src/calendar/Calendar.tsx
View File

@ -482,10 +482,9 @@ export default defineComponent({
} }
if (props.showConfirm) { if (props.showConfirm) {
const text = buttonDisabled.value const slot = slots['confirm-text'];
? props.confirmDisabledText const disabled = buttonDisabled.value;
: props.confirmText; const text = disabled ? props.confirmDisabledText : props.confirmText;
return ( return (
<Button <Button
round round
@ -493,11 +492,11 @@ export default defineComponent({
type="danger" type="danger"
color={props.color} color={props.color}
class={bem('confirm')} class={bem('confirm')}
disabled={buttonDisabled.value} disabled={disabled}
nativeType="button" nativeType="button"
onClick={onConfirm} onClick={onConfirm}
> >
{text || t('confirm')} {slot ? slot({ disabled }) : text || t('confirm')}
</Button> </Button>
); );
} }

15
packages/vant/src/calendar/README.md
View File

@ -330,13 +330,14 @@ Following props are supported when the type is multiple
### Slots ### Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
| --------------------- | ------------------------- | ---------- | | --------------------- | ------------------------- | ----------------------- |
| title | Custom title | - | | title | Custom title | - |
| subtitle `v3.1.3` | Custom subtitle | - | | subtitle `v3.1.3` | Custom subtitle | - |
| footer | Custom footer | - | | footer | Custom footer | - |
| top-info `v3.0.17` | Custom top info of day | _day: Day_ | | confirm-text `v3.2.6` | Custom confirm text | _{ disabled: boolean }_ |
| bottom-info `v3.0.17` | Custom bottom info of day | _day: Day_ | | top-info `v3.0.17` | Custom top info of day | _day: Day_ |
| bottom-info `v3.0.17` | Custom bottom info of day | _day: Day_ |
### Methods ### Methods

15
packages/vant/src/calendar/README.zh-CN.md
View File

@ -336,13 +336,14 @@ export default {
### Slots ### Slots
| 名称 | 说明 | 参数 | | 名称 | 说明 | 参数 |
| --------------------- | ------------------------ | ---------- | | --------------------- | ------------------------ | ----------------------- |
| title | 自定义标题 | - | | title | 自定义标题 | - |
| subtitle `v3.1.3` | 自定义日历副标题 | - | | subtitle `v3.1.3` | 自定义日历副标题 | - |
| footer | 自定义底部区域内容 | - | | footer | 自定义底部区域内容 | - |
| top-info `v3.0.17` | 自定义日期上方的提示信息 | _day: Day_ | | confirm-text `v3.2.6` | 自定义确认按钮的内容 | _{ disabled: boolean }_ |
| bottom-info `v3.0.17` | 自定义日期下方的提示信息 | _day: Day_ | | top-info `v3.0.17` | 自定义日期上方的提示信息 | _day: Day_ |
| bottom-info `v3.0.17` | 自定义日期下方的提示信息 | _day: Day_ |
### 方法 ### 方法

12
packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap
View File

@ -900,6 +900,18 @@ exports[`row-height prop 1`] = `
</div> </div>
`; `;
exports[`should render confirm-text slot correctly 1`] = `
<button type="button"
class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"
>
<div class="van-button__content">
<span class="van-button__text">
Custom confirm text false
</span>
</div>
</button>
`;
exports[`should render title、footer、subtitle slot correctly 1`] = ` exports[`should render title、footer、subtitle slot correctly 1`] = `
<div class="van-calendar"> <div class="van-calendar">
<div class="van-calendar__header"> <div class="van-calendar__header">

16
packages/vant/src/calendar/test/index.spec.ts
View File

@ -569,3 +569,19 @@ test('should emit click-subtitle event when clicking the subtitle', async () =>
wrapper.find('.van-calendar__header-subtitle').trigger('click'); wrapper.find('.van-calendar__header-subtitle').trigger('click');
expect(wrapper.emitted('click-subtitle')).toBeTruthy(); expect(wrapper.emitted('click-subtitle')).toBeTruthy();
}); });
test('should render confirm-text slot correctly', async () => {
const wrapper = mount(Calendar, {
props: {
poppable: false,
lazyRender: false,
},
slots: {
'confirm-text': ({ disabled }) => `Custom confirm text ${disabled}`,
},
});
await later();
expect(wrapper.find('.van-calendar__confirm').html()).toMatchSnapshot();
});