github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: avatar add crossOrigin & maxPopoverTrigger

feat-css-var
tangjinzhou 2022-02-25 16:59:21 +08:00
parent c84657012d
commit 5bdb45d668
7 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/avatar/Avatar.tsx
View File

@ -13,7 +13,7 @@ import { useInjectSize } from '../_util/hooks/useSize';
export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
export const avatarProps = {
export const avatarProps = () => ({
prefixCls: PropTypes.string,
shape: PropTypes.oneOf(tuple('circle', 'square')).def('circle'),
size: {
@ -27,17 +27,18 @@ export const avatarProps = {
alt: PropTypes.string,
gap: PropTypes.number,
draggable: PropTypes.bool,
crossOrigin: String as PropType<'' | 'anonymous' | 'use-credentials'>,
loadError: {
type: Function as PropType<() => boolean>,
},
};
});
export type AvatarProps = Partial<ExtractPropTypes<typeof avatarProps>>;
export type AvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
const Avatar = defineComponent({
name: 'AAvatar',
inheritAttrs: false,
props: avatarProps,
props: avatarProps(),
slots: ['icon'],
setup(props, { slots, attrs }) {
const isImgExist = ref(true);
@ -125,7 +126,7 @@ const Avatar = defineComponent({
});
return () => {
const { shape, size: customSize, src, alt, srcset, draggable } = props;
const { shape, size: customSize, src, alt, srcset, draggable, crossOrigin } = props;
const icon = getPropsSlot(slots, props, 'icon');
const pre = prefixCls.value;
const size = customSize === 'default' ? groupSize.value : customSize;
@ -159,6 +160,7 @@ const Avatar = defineComponent({
srcset={srcset}
onError={handleImgLoadError}
alt={alt}
crossorigin={crossOrigin}
/>
);
} else if (icon) {

27
components/avatar/Group.tsx
View File

@ -1,6 +1,6 @@
import { cloneElement } from '../_util/vnode';
import type { AvatarSize } from './Avatar';
import Avatar, { avatarProps } from './Avatar';
import Avatar from './Avatar';
import Popover from '../popover';
import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
import { defineComponent } from 'vue';
@ -10,7 +10,7 @@ import { tuple } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
import useProvideSize from '../_util/hooks/useSize';
const groupProps = {
export const groupProps = () => ({
prefixCls: PropTypes.string,
maxCount: PropTypes.number,
maxStyle: {
@ -18,26 +18,33 @@ const groupProps = {
default: () => ({} as CSSProperties),
},
maxPopoverPlacement: PropTypes.oneOf(tuple('top', 'bottom')).def('top'),
maxPopoverTrigger: String as PropType<'hover' | 'focus' | 'click'>,
/*
* Size of avatar, options: `large`, `small`, `default`
* or a custom number size
* */
size: avatarProps.size,
};
size: {
type: [Number, String, Object] as PropType<AvatarSize>,
default: (): AvatarSize => 'default',
},
});
export type AvatarGroupProps = Partial<ExtractPropTypes<typeof groupProps>> & {
size?: AvatarSize;
};
export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>;
const Group = defineComponent({
name: 'AAvatarGroup',
inheritAttrs: false,
props: groupProps,
props: groupProps(),
setup(props, { slots, attrs }) {
const { prefixCls, direction } = useConfigInject('avatar-group', props);
useProvideSize<AvatarSize>(props);
return () => {
const { maxPopoverPlacement = 'top', maxCount, maxStyle } = props;
const {
maxPopoverPlacement = 'top',
maxCount,
maxStyle,
maxPopoverTrigger = 'hover',
} = props;
const cls = {
[prefixCls.value]: true,
@ -61,7 +68,7 @@ const Group = defineComponent({
<Popover
key="avatar-popover-key"
content={childrenHidden}
trigger="hover"
trigger={maxPopoverTrigger}
placement={maxPopoverPlacement}
overlayClassName={`${prefixCls.value}-popover`}
>

8
components/avatar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -15,23 +15,23 @@ exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = `
`;
exports[`renders ./components/avatar/demo/group.vue correctly 1`] = `
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<!----><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
</div>
<div class="ant-divider ant-divider-horizontal" role="separator">
<!---->
</div>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
</div>
<div class="ant-divider ant-divider-horizontal" role="separator">
<!---->
</div>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
<!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
</div>
`;
exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg focusable="false" class="" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>`;
exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;
exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="https://joeschmoe.io/api/v1/random"></span><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>`;

6
components/avatar/demo/group.vue
View File

@ -17,7 +17,7 @@ Avatar group display.
<template>
<a-avatar-group>
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<a-avatar src="https://joeschmoe.io/api/v1/random" />
<a-avatar style="background-color: #f56a00">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
@ -30,7 +30,7 @@ Avatar group display.
</a-avatar-group>
<a-divider />
<a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<a-avatar src="https://joeschmoe.io/api/v1/random" />
<a-avatar style="background-color: #1890ff">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
@ -50,7 +50,7 @@ Avatar group display.
backgroundColor: '#fde3cf',
}"
>
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<a-avatar src="https://joeschmoe.io/api/v1/random" />
<a-avatar style="background-color: #1890ff">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">

2
components/avatar/demo/type.vue
View File

@ -23,7 +23,7 @@ Image, Icon and letter are supported, and the latter two kinds avatar can have c
</a-avatar>
<a-avatar>U</a-avatar>
<a-avatar>USER</a-avatar>
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<a-avatar src="https://joeschmoe.io/api/v1/random" />
<a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
<a-avatar style="background-color: #87d068">
<template #icon>

2
components/avatar/index.en-US.md
View File

@ -21,6 +21,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| alt | This attribute defines the alternative text describing the image | string | - |
| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
### Avatar.Group (2.2.0)
@ -29,5 +30,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| --- | --- | --- | --- | --- |
| maxCount | Max avatars to show | number | - | |
| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | |
| maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 3.0 |
| maxStyle | The style of excess avatar style | CSSProperties | - | |
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | |

2
components/avatar/index.zh-CN.md
View File

@ -27,6 +27,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
### Avatar.Group (2.2.0)
@ -34,5 +35,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
| --- | --- | --- | --- | --- |
| maxCount | 显示的最大头像个数 | number | - | |
| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 3.0 |
| maxStyle | 多余头像样式 | CSSProperties | - | |
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | |