mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-15 09:21:25 +08:00
170 lines
4.5 KiB
Vue
170 lines
4.5 KiB
Vue
import { inject } from 'vue';
|
|
import { ConfigConsumerProps } from '../config-provider';
|
|
import { getComponent } from '../_util/props-util';
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
export default {
|
|
name: 'AAvatar',
|
|
props: {
|
|
prefixCls: {
|
|
type: String,
|
|
default: undefined,
|
|
},
|
|
shape: {
|
|
validator: val => ['circle', 'square'].includes(val),
|
|
default: 'circle',
|
|
},
|
|
size: {
|
|
validator: val => {
|
|
return typeof val === 'number' || ['small', 'large', 'default'].includes(val);
|
|
},
|
|
default: 'default',
|
|
},
|
|
src: String,
|
|
/** Srcset of image avatar */
|
|
srcSet: String,
|
|
icon: PropTypes.any,
|
|
alt: String,
|
|
loadError: Function,
|
|
},
|
|
setup() {
|
|
return {
|
|
configProvider: inject('configProvider', ConfigConsumerProps),
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
isImgExist: true,
|
|
isMounted: false,
|
|
scale: 1,
|
|
};
|
|
},
|
|
watch: {
|
|
src() {
|
|
this.$nextTick(() => {
|
|
this.isImgExist = true;
|
|
this.scale = 1;
|
|
// force uodate for position
|
|
this.$forceUpdate();
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.setScale();
|
|
this.isMounted = true;
|
|
});
|
|
},
|
|
updated() {
|
|
this.$nextTick(() => {
|
|
this.setScale();
|
|
});
|
|
},
|
|
methods: {
|
|
setScale() {
|
|
if (!this.$refs.avatarChildren || !this.$refs.avatarNode) {
|
|
return;
|
|
}
|
|
const childrenWidth = this.$refs.avatarChildren.offsetWidth; // offsetWidth avoid affecting be transform scale
|
|
const nodeWidth = this.$refs.avatarNode.offsetWidth;
|
|
// 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;
|
|
},
|
|
handleImgLoadError() {
|
|
const { loadError } = this.$props;
|
|
const errorFlag = loadError ? loadError() : undefined;
|
|
if (errorFlag !== false) {
|
|
this.isImgExist = false;
|
|
}
|
|
},
|
|
},
|
|
render() {
|
|
const { prefixCls: customizePrefixCls, shape, size, src, alt, srcSet } = this.$props;
|
|
const icon = getComponent(this, 'icon');
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
|
|
|
|
const { isImgExist, scale, isMounted } = this.$data;
|
|
|
|
const sizeCls = {
|
|
[`${prefixCls}-lg`]: size === 'large',
|
|
[`${prefixCls}-sm`]: size === 'small',
|
|
};
|
|
|
|
const classString = {
|
|
[prefixCls]: true,
|
|
...sizeCls,
|
|
[`${prefixCls}-${shape}`]: shape,
|
|
[`${prefixCls}-image`]: src && isImgExist,
|
|
[`${prefixCls}-icon`]: icon,
|
|
};
|
|
|
|
const sizeStyle =
|
|
typeof size === 'number'
|
|
? {
|
|
width: `${size}px`,
|
|
height: `${size}px`,
|
|
lineHeight: `${size}px`,
|
|
fontSize: icon ? `${size / 2}px` : '18px',
|
|
}
|
|
: {};
|
|
|
|
let children = this.$slots.default && this.$slots.default();
|
|
if (src && isImgExist) {
|
|
children = <img src={src} srcSet={srcSet} onError={this.handleImgLoadError} alt={alt} />;
|
|
} else if (icon) {
|
|
children = icon;
|
|
} else {
|
|
const childrenNode = this.$refs.avatarChildren;
|
|
if (childrenNode || scale !== 1) {
|
|
const transformString = `scale(${scale}) translateX(-50%)`;
|
|
const childrenStyle = {
|
|
msTransform: transformString,
|
|
WebkitTransform: transformString,
|
|
transform: transformString,
|
|
};
|
|
const sizeChildrenStyle =
|
|
typeof size === 'number'
|
|
? {
|
|
lineHeight: `${size}px`,
|
|
}
|
|
: {};
|
|
children = (
|
|
<span
|
|
class={`${prefixCls}-string`}
|
|
ref="avatarChildren"
|
|
style={{ ...sizeChildrenStyle, ...childrenStyle }}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
} else {
|
|
const childrenStyle = {};
|
|
if (!isMounted) {
|
|
childrenStyle.opacity = 0;
|
|
}
|
|
children = (
|
|
<span class={`${prefixCls}-string`} ref="avatarChildren" style={{ opacity: 0 }}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
return (
|
|
<span ref="avatarNode" class={classString} style={sizeStyle}>
|
|
{children}
|
|
</span>
|
|
);
|
|
},
|
|
};
|