mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-11-04 21:02:09 +08:00 
			
		
		
		
	fix(ShareSheet): allow custom icon (#11709)
Co-authored-by: xuwenqiang <xuwenqiang@kanzhun.com>
This commit is contained in:
		
							parent
							
								
									34634f645d
								
							
						
					
					
						commit
						28885fdee5
					
				@ -24,6 +24,8 @@ export type ShareSheetOption = {
 | 
			
		||||
 | 
			
		||||
export type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][];
 | 
			
		||||
 | 
			
		||||
const isImage = (name?: string) => name?.includes('/');
 | 
			
		||||
 | 
			
		||||
const popupInheritKeys = [
 | 
			
		||||
  ...popupSharedPropKeys,
 | 
			
		||||
  'round',
 | 
			
		||||
@ -93,14 +95,14 @@ export default defineComponent({
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    const renderIcon = (icon: string) => {
 | 
			
		||||
      if (iconMap[icon]) {
 | 
			
		||||
        return (
 | 
			
		||||
          <div class={bem('icon', [icon])}>
 | 
			
		||||
            <Icon name={iconMap[icon] || icon} />
 | 
			
		||||
          </div>
 | 
			
		||||
        );
 | 
			
		||||
      if (isImage(icon)) {
 | 
			
		||||
        return <img src={icon} class={bem('image-icon')} />;
 | 
			
		||||
      }
 | 
			
		||||
      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) => {
 | 
			
		||||
 | 
			
		||||
@ -83,6 +83,7 @@ const customIconOptions = computed(() => [
 | 
			
		||||
    name: t('name'),
 | 
			
		||||
    icon: cdnURL('custom-icon-water.png'),
 | 
			
		||||
  },
 | 
			
		||||
  { name: t('name'), icon: 'label' },
 | 
			
		||||
]);
 | 
			
		||||
 | 
			
		||||
const optionsWithDesc = computed<ShareSheetOptions>(() => [
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,8 @@
 | 
			
		||||
import { ShareSheet } from '..';
 | 
			
		||||
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 () => {
 | 
			
		||||
  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 });
 | 
			
		||||
  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);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user