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

fix: avatar src scale not update

pull/4060/head
tanjinzhou 2021-05-10 18:52:55 +08:00
parent 4d178debd7
commit 7a2f28ac2d
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/avatar/Avatar.tsx
View File

@ -27,6 +27,7 @@ const avatarProps = {
srcset: PropTypes.string, srcset: PropTypes.string,
icon: PropTypes.VNodeChild, icon: PropTypes.VNodeChild,
alt: PropTypes.string, alt: PropTypes.string,
gap: Number,
loadError: { loadError: {
type: Function as PropType<() => boolean>, type: Function as PropType<() => boolean>,
}, },
@ -41,8 +42,6 @@ const Avatar = defineComponent({
const isImgExist = ref(true); const isImgExist = ref(true);
const isMounted = ref(false); const isMounted = ref(false);
const scale = ref(1); const scale = ref(1);
const lastChildrenWidth = ref<number>(undefined);
const lastNodeWidth = ref<number>(undefined);
const avatarChildrenRef = ref<HTMLElement>(null); const avatarChildrenRef = ref<HTMLElement>(null);
const avatarNodeRef = ref<HTMLElement>(null); const avatarNodeRef = ref<HTMLElement>(null);
@ -56,17 +55,13 @@ const Avatar = defineComponent({
const childrenWidth = avatarChildrenRef.value.offsetWidth; // offsetWidth avoid affecting be transform scale const childrenWidth = avatarChildrenRef.value.offsetWidth; // offsetWidth avoid affecting be transform scale
const nodeWidth = avatarNodeRef.value.offsetWidth; const nodeWidth = avatarNodeRef.value.offsetWidth;
// denominator is 0 is no meaning // denominator is 0 is no meaning
if ( if (childrenWidth !== 0 && nodeWidth !== 0) {
childrenWidth === 0 || const { gap = 4 } = props;
nodeWidth === 0 || if (gap * 2 < nodeWidth) {
(lastChildrenWidth.value === childrenWidth && lastNodeWidth.value === nodeWidth) scale.value =
) { nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1;
return; }
} }
lastChildrenWidth.value = childrenWidth;
lastNodeWidth.value = nodeWidth;
// add 4px gap for each side to get better performance
scale.value = nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1;
}; };
const handleImgLoadError = () => { const handleImgLoadError = () => {