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

fix(ShareSheet): allow custom icon (#11709)

Browse Source 
Co-authored-by: xuwenqiang <xuwenqiang@kanzhun.com>
This commit is contained in:
MrXwq 2023-03-31 08:57:06 +08:00 committed by GitHub
parent 34634f645d
commit 28885fdee5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/vant/src/share-sheet/ShareSheet.tsx
View File

@ -24,6 +24,8 @@ export type ShareSheetOption = {
export type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][]; export type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][];
const isImage = (name?: string) => name?.includes('/');
const popupInheritKeys = [ const popupInheritKeys = [
...popupSharedPropKeys, ...popupSharedPropKeys,
'round', 'round',
@ -93,14 +95,14 @@ export default defineComponent({
}; };
const renderIcon = (icon: string) => { const renderIcon = (icon: string) => {
if (iconMap[icon]) { if (isImage(icon)) {
return ( return <img src={icon} class={bem('image-icon')} />;
<div class={bem('icon', [icon])}>
<Icon name={iconMap[icon] || icon} />
</div>
);
} }
return <img src={icon} class={bem('image-icon')} />; return (
<div class={bem('icon', [icon])}>
<Icon name={iconMap[icon] || icon} />
</div>
);
}; };
const renderOption = (option: ShareSheetOption, index: number) => { const renderOption = (option: ShareSheetOption, index: number) => {

1
packages/vant/src/share-sheet/demo/index.vue
View File

@ -83,6 +83,7 @@ const customIconOptions = computed(() => [
name: t('name'), name: t('name'),
icon: cdnURL('custom-icon-water.png'), icon: cdnURL('custom-icon-water.png'),
}, },
{ name: t('name'), icon: 'label' },
]); ]);
const optionsWithDesc = computed<ShareSheetOptions>(() => [ const optionsWithDesc = computed<ShareSheetOptions>(() => [

19
packages/vant/src/share-sheet/test/index.spec.ts
View File

@ -1,5 +1,8 @@
import { ShareSheet } from '..'; import { ShareSheet } from '..';
import { mount, trigger, later } from '../../../test'; import { mount, trigger, later } from '../../../test';
import { cdnURL } from '../../../docs/site';
const IMAGE = cdnURL('custom-icon-water.png');
test('should render cancel text when using cancel-text prop', async () => { test('should render cancel text when using cancel-text prop', async () => {
const wrapper = mount(ShareSheet, { const wrapper = mount(ShareSheet, {
@ -131,3 +134,19 @@ test('should have "van-popup--round" class when setting the round prop', async (
await wrapper.setProps({ round: false }); await wrapper.setProps({ round: false });
expect(wrapper.find('.van-popup--round').exists()).toBeFalsy(); expect(wrapper.find('.van-popup--round').exists()).toBeFalsy();
}); });
test('should allow to custom the icon of option', () => {
const wrapper = mount(ShareSheet, {
props: {
show: true,
options: [
{ name: 'Water', icon: IMAGE },
{ name: 'Collect', icon: 'label' },
],
},
});
expect(
wrapper.element.querySelectorAll('.van-share-sheet__option').length
).toEqual(2);
});