2020-10-13 07:02:35 +00:00
|
|
|
import { tuple, VueNode } from '../_util/type';
|
2020-10-28 07:31:45 +00:00
|
|
|
import { CSSProperties, defineComponent, inject, nextTick, PropType } from 'vue';
|
2020-09-30 02:47:18 +00:00
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2020-06-08 07:38:07 +00:00
|
|
|
import { getComponent } from '../_util/props-util';
|
2020-03-07 11:45:13 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
2017-11-09 10:57:34 +00:00
|
|
|
|
2020-10-13 07:02:35 +00:00
|
|
|
export default defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'AAvatar',
|
2017-11-09 10:57:34 +00:00
|
|
|
props: {
|
2020-10-13 07:02:35 +00:00
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
shape: PropTypes.oneOf(tuple('circle', 'square')),
|
2017-11-09 10:57:34 +00:00
|
|
|
size: {
|
2020-10-13 07:02:35 +00:00
|
|
|
type: [Number, String] as PropType<'large' | 'small' | 'default' | number>,
|
2020-10-19 08:43:10 +00:00
|
|
|
default: 'default',
|
2017-11-09 10:57:34 +00:00
|
|
|
},
|
2020-10-13 07:02:35 +00:00
|
|
|
src: PropTypes.string,
|
2019-01-02 12:53:52 +00:00
|
|
|
/** Srcset of image avatar */
|
2020-10-13 07:02:35 +00:00
|
|
|
srcset: PropTypes.string,
|
|
|
|
/** @deprecated please use `srcset` instead `srcSet` */
|
|
|
|
srcSet: PropTypes.string,
|
|
|
|
icon: PropTypes.VNodeChild,
|
|
|
|
alt: PropTypes.string,
|
2020-10-19 08:43:10 +00:00
|
|
|
loadError: {
|
|
|
|
type: Function as PropType<() => boolean>,
|
2020-10-13 07:02:35 +00:00
|
|
|
},
|
2017-11-09 10:57:34 +00:00
|
|
|
},
|
2020-06-08 07:38:07 +00:00
|
|
|
setup() {
|
|
|
|
return {
|
2020-09-30 02:47:18 +00:00
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-06-08 07:38:07 +00:00
|
|
|
};
|
2019-03-11 11:58:32 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
2017-11-09 10:57:34 +00:00
|
|
|
return {
|
2018-09-05 13:28:54 +00:00
|
|
|
isImgExist: true,
|
2020-03-07 11:45:13 +00:00
|
|
|
isMounted: false,
|
2017-11-09 10:57:34 +00:00
|
|
|
scale: 1,
|
2020-10-13 07:02:35 +00:00
|
|
|
lastChildrenWidth: undefined,
|
2020-10-19 08:43:10 +00:00
|
|
|
lastNodeWidth: undefined,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2017-11-09 10:57:34 +00:00
|
|
|
},
|
2019-04-09 12:39:49 +00:00
|
|
|
watch: {
|
|
|
|
src() {
|
2020-10-28 07:31:45 +00:00
|
|
|
nextTick(() => {
|
2019-09-06 11:01:49 +00:00
|
|
|
this.isImgExist = true;
|
|
|
|
this.scale = 1;
|
|
|
|
// force uodate for position
|
|
|
|
this.$forceUpdate();
|
|
|
|
});
|
2019-04-09 12:39:49 +00:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
mounted() {
|
2020-10-28 07:31:45 +00:00
|
|
|
nextTick(() => {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.setScale();
|
2020-03-07 11:45:13 +00:00
|
|
|
this.isMounted = true;
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
updated() {
|
2020-10-28 07:31:45 +00:00
|
|
|
nextTick(() => {
|
2020-03-07 11:45:13 +00:00
|
|
|
this.setScale();
|
|
|
|
});
|
2017-11-09 10:57:34 +00:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
setScale() {
|
2020-03-07 11:45:13 +00:00
|
|
|
if (!this.$refs.avatarChildren || !this.$refs.avatarNode) {
|
|
|
|
return;
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2020-10-13 07:02:35 +00:00
|
|
|
const childrenWidth = (this.$refs.avatarChildren as HTMLElement).offsetWidth; // offsetWidth avoid affecting be transform scale
|
|
|
|
const nodeWidth = (this.$refs.avatarNode as HTMLElement).offsetWidth;
|
2020-03-07 11:45:13 +00:00
|
|
|
// denominator is 0 is no meaning
|
|
|
|
if (
|
|
|
|
childrenWidth === 0 ||
|
|
|
|
nodeWidth === 0 ||
|
|
|
|
(this.lastChildrenWidth === childrenWidth && this.lastNodeWidth === nodeWidth)
|
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.lastChildrenWidth = childrenWidth;
|
|
|
|
this.lastNodeWidth = nodeWidth;
|
|
|
|
// add 4px gap for each side to get better performance
|
|
|
|
this.scale = nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1;
|
2018-09-05 13:28:54 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
handleImgLoadError() {
|
|
|
|
const { loadError } = this.$props;
|
|
|
|
const errorFlag = loadError ? loadError() : undefined;
|
2018-09-05 13:28:54 +00:00
|
|
|
if (errorFlag !== false) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.isImgExist = false;
|
2017-11-09 10:57:34 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2020-10-13 07:02:35 +00:00
|
|
|
const { prefixCls: customizePrefixCls, shape, size, src, alt, srcset, srcSet } = this.$props;
|
2020-06-08 07:38:07 +00:00
|
|
|
const icon = getComponent(this, 'icon');
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-11 11:58:32 +00:00
|
|
|
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
const { isImgExist, scale, isMounted } = this.$data;
|
2018-09-05 13:28:54 +00:00
|
|
|
|
|
|
|
const sizeCls = {
|
|
|
|
[`${prefixCls}-lg`]: size === 'large',
|
|
|
|
[`${prefixCls}-sm`]: size === 'small',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-09-05 13:28:54 +00:00
|
|
|
|
|
|
|
const classString = {
|
|
|
|
[prefixCls]: true,
|
|
|
|
...sizeCls,
|
|
|
|
[`${prefixCls}-${shape}`]: shape,
|
|
|
|
[`${prefixCls}-image`]: src && isImgExist,
|
|
|
|
[`${prefixCls}-icon`]: icon,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2020-10-13 07:02:35 +00:00
|
|
|
const sizeStyle: CSSProperties =
|
2019-01-12 03:33:27 +00:00
|
|
|
typeof size === 'number'
|
|
|
|
? {
|
|
|
|
width: `${size}px`,
|
|
|
|
height: `${size}px`,
|
|
|
|
lineHeight: `${size}px`,
|
|
|
|
fontSize: icon ? `${size / 2}px` : '18px',
|
|
|
|
}
|
|
|
|
: {};
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2020-10-24 12:36:57 +00:00
|
|
|
let children: VueNode = this.$slots.default?.();
|
2018-09-05 13:28:54 +00:00
|
|
|
if (src && isImgExist) {
|
2020-10-19 08:43:10 +00:00
|
|
|
children = (
|
|
|
|
<img src={src} srcset={srcset || srcSet} onError={this.handleImgLoadError} alt={alt} />
|
|
|
|
);
|
2018-09-05 13:28:54 +00:00
|
|
|
} else if (icon) {
|
2020-03-28 07:28:06 +00:00
|
|
|
children = icon;
|
2018-09-05 13:28:54 +00:00
|
|
|
} else {
|
2019-01-12 03:33:27 +00:00
|
|
|
const childrenNode = this.$refs.avatarChildren;
|
2020-03-07 11:45:13 +00:00
|
|
|
if (childrenNode || scale !== 1) {
|
2019-01-12 03:33:27 +00:00
|
|
|
const transformString = `scale(${scale}) translateX(-50%)`;
|
2020-10-13 07:02:35 +00:00
|
|
|
const childrenStyle: CSSProperties = {
|
2018-11-28 02:35:37 +00:00
|
|
|
msTransform: transformString,
|
|
|
|
WebkitTransform: transformString,
|
|
|
|
transform: transformString,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
|
|
|
const sizeChildrenStyle =
|
|
|
|
typeof size === 'number'
|
|
|
|
? {
|
|
|
|
lineHeight: `${size}px`,
|
|
|
|
}
|
|
|
|
: {};
|
2018-09-05 13:28:54 +00:00
|
|
|
children = (
|
|
|
|
<span
|
|
|
|
class={`${prefixCls}-string`}
|
2019-01-12 03:33:27 +00:00
|
|
|
ref="avatarChildren"
|
2018-09-05 13:28:54 +00:00
|
|
|
style={{ ...sizeChildrenStyle, ...childrenStyle }}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</span>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-09-05 13:28:54 +00:00
|
|
|
} else {
|
2020-10-13 07:02:35 +00:00
|
|
|
const childrenStyle: CSSProperties = {};
|
2020-03-07 11:45:13 +00:00
|
|
|
if (!isMounted) {
|
|
|
|
childrenStyle.opacity = 0;
|
|
|
|
}
|
2018-09-05 13:28:54 +00:00
|
|
|
children = (
|
2020-03-07 11:45:13 +00:00
|
|
|
<span class={`${prefixCls}-string`} ref="avatarChildren" style={{ opacity: 0 }}>
|
2018-09-05 13:28:54 +00:00
|
|
|
{children}
|
|
|
|
</span>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
|
|
|
}
|
2018-03-19 01:43:31 +00:00
|
|
|
return (
|
2020-06-08 09:42:08 +00:00
|
|
|
<span ref="avatarNode" class={classString} style={sizeStyle}>
|
2020-03-07 11:45:13 +00:00
|
|
|
{children}
|
|
|
|
</span>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2017-11-09 10:57:34 +00:00
|
|
|
},
|
2020-10-13 07:02:35 +00:00
|
|
|
});
|