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(ShareSheet): add cancel slot (#8335)

Browse Source
This commit is contained in:
neverland 2021-03-14 11:24:48 +08:00 committed by GitHub
parent c424d6efcd
commit 2961384530
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/share-sheet/README.md
View File

@ -197,10 +197,11 @@ export default {
### Slots ### Slots
| Name | Description | | Name | Description |
| ----------- | ------------------ | | ---------------- | ----------------------------------- |
| title | Custom title | | title | Custom title |
| description | Custom description | | description | Custom description |
| cancel `v3.0.10` | Custom the content of cancel button |
### Less Variables ### Less Variables

9
src/share-sheet/README.zh-CN.md
View File

@ -215,10 +215,11 @@ export default {
### Slots ### Slots
| 名称 | 说明 | | 名称 | 说明 |
| ----------- | -------------- | | ---------------- | ------------------ |
| title | 自定义顶部标题 | | title | 自定义顶部标题 |
| description | 自定义描述文字 | | description | 自定义描述文字 |
| cancel `v3.0.10` | 自定义取消按钮内容 |
### 样式变量 ### 样式变量

10
src/share-sheet/ShareSheet.tsx
View File

@ -127,12 +127,12 @@ export default defineComponent({
return renderOptions(options as ShareSheetOption[]); return renderOptions(options as ShareSheetOption[]);
}; };
const renderCancelText = () => { const renderCancelButton = () => {
const text = props.cancelText ?? t('cancel'); const cancelText = props.cancelText ?? t('cancel');
if (text) { if (slots.cancel || cancelText) {
return ( return (
<button type="button" class={bem('cancel')} onClick={onCancel}> <button type="button" class={bem('cancel')} onClick={onCancel}>
{text} {slots.cancel ? slots.cancel() : cancelText}
</button> </button>
); );
} }
@ -150,7 +150,7 @@ export default defineComponent({
> >
{renderHeader()} {renderHeader()}
{renderRows()} {renderRows()}
{renderCancelText()} {renderCancelButton()}
</Popup> </Popup>
); );
}, },

8
src/share-sheet/test/__snapshots__/index.spec.ts.snap
View File

@ -1,5 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render cancel slot correctly 1`] = `
<button type="button"
class="van-share-sheet__cancel"
>
Custom Cancel
</button>
`;
exports[`should render cancel text when using cancel-text prop 1`] = ` exports[`should render cancel text when using cancel-text prop 1`] = `
<button type="button" <button type="button"
class="van-share-sheet__cancel" class="van-share-sheet__cancel"

13
src/share-sheet/test/index.spec.ts
View File

@ -104,3 +104,16 @@ test('should emit click-overlay event when overlay is clicked', async () => {
expect(onClickOverlay).toHaveBeenCalledTimes(1); expect(onClickOverlay).toHaveBeenCalledTimes(1);
expect(wrapper.emitted('update:show')![0]).toEqual([false]); expect(wrapper.emitted('update:show')![0]).toEqual([false]);
}); });
test('should render cancel slot correctly', async () => {
const wrapper = mount(ShareSheet, {
props: {
show: true,
},
slots: {
cancel: () => 'Custom Cancel',
},
});
expect(wrapper.find('.van-share-sheet__cancel').html()).toMatchSnapshot();
});