2019-03-11 19:58:32 +08:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2019-01-12 11:33:27 +08:00
|
|
|
import Icon from '../icon';
|
2017-11-09 18:57:34 +08:00
|
|
|
|
|
|
|
export default {
|
2018-04-08 21:17:20 +08:00
|
|
|
name: 'AAvatar',
|
2017-11-09 18:57:34 +08:00
|
|
|
props: {
|
|
|
|
prefixCls: {
|
|
|
|
type: String,
|
2019-09-06 19:01:49 +08:00
|
|
|
default: undefined,
|
2017-11-09 18:57:34 +08:00
|
|
|
},
|
|
|
|
shape: {
|
2019-01-12 11:33:27 +08:00
|
|
|
validator: val => ['circle', 'square'].includes(val),
|
2017-11-09 18:57:34 +08:00
|
|
|
default: 'circle',
|
|
|
|
},
|
|
|
|
size: {
|
2019-01-12 11:33:27 +08:00
|
|
|
validator: val => {
|
|
|
|
return typeof val === 'number' || ['small', 'large', 'default'].includes(val);
|
2018-09-05 21:28:54 +08:00
|
|
|
},
|
2017-11-09 18:57:34 +08:00
|
|
|
default: 'default',
|
|
|
|
},
|
2017-11-10 10:28:49 +08:00
|
|
|
src: String,
|
2019-01-02 20:53:52 +08:00
|
|
|
/** Srcset of image avatar */
|
|
|
|
srcSet: String,
|
2017-11-10 10:28:49 +08:00
|
|
|
icon: String,
|
2018-09-05 21:28:54 +08:00
|
|
|
alt: String,
|
|
|
|
loadError: Function,
|
2017-11-09 18:57:34 +08:00
|
|
|
},
|
2019-03-11 19:58:32 +08:00
|
|
|
inject: {
|
2019-09-11 22:35:25 +08:00
|
|
|
configProvider: { default: () => ConfigConsumerProps },
|
2019-03-11 19:58:32 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
data() {
|
2017-11-09 18:57:34 +08:00
|
|
|
return {
|
2018-09-05 21:28:54 +08:00
|
|
|
isImgExist: true,
|
2017-11-09 18:57:34 +08:00
|
|
|
scale: 1,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2017-11-09 18:57:34 +08:00
|
|
|
},
|
2019-04-09 20:39:49 +08:00
|
|
|
watch: {
|
|
|
|
src() {
|
2019-09-06 19:01:49 +08:00
|
|
|
this.$nextTick(() => {
|
|
|
|
this.isImgExist = true;
|
|
|
|
this.scale = 1;
|
|
|
|
// force uodate for position
|
|
|
|
this.$forceUpdate();
|
|
|
|
});
|
2019-04-09 20:39:49 +08:00
|
|
|
},
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
mounted() {
|
|
|
|
this.prevChildren = this.$slots.default;
|
|
|
|
this.prevState = { ...this.$data };
|
2018-09-05 21:28:54 +08:00
|
|
|
this.$nextTick(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.setScale();
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
updated() {
|
|
|
|
if (
|
|
|
|
this.preChildren !== this.$slots.default ||
|
2018-09-05 21:28:54 +08:00
|
|
|
(this.prevState.scale !== this.$data.scale && this.$data.scale === 1) ||
|
2019-01-12 11:33:27 +08:00
|
|
|
this.prevState.isImgExist !== this.$data.isImgExist
|
|
|
|
) {
|
2018-09-05 21:28:54 +08:00
|
|
|
this.$nextTick(() => {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.setScale();
|
|
|
|
});
|
2018-09-05 21:28:54 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
this.preChildren = this.$slots.default;
|
|
|
|
this.prevState = { ...this.$data };
|
2017-11-09 18:57:34 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
setScale() {
|
|
|
|
const childrenNode = this.$refs.avatarChildren;
|
2018-09-05 21:28:54 +08:00
|
|
|
if (childrenNode) {
|
2019-01-12 11:33:27 +08:00
|
|
|
const childrenWidth = childrenNode.offsetWidth;
|
|
|
|
const avatarWidth = this.$el.getBoundingClientRect().width;
|
2018-09-05 21:28:54 +08:00
|
|
|
if (avatarWidth - 8 < childrenWidth) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.scale = (avatarWidth - 8) / childrenWidth;
|
2017-11-09 18:57:34 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.scale = 1;
|
2017-11-09 18:57:34 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
this.$forceUpdate();
|
2018-09-05 21:28:54 +08:00
|
|
|
}
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
handleImgLoadError() {
|
|
|
|
const { loadError } = this.$props;
|
|
|
|
const errorFlag = loadError ? loadError() : undefined;
|
2018-09-05 21:28:54 +08:00
|
|
|
if (errorFlag !== false) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.isImgExist = false;
|
2017-11-09 18:57:34 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
2019-03-11 19:58:32 +08:00
|
|
|
const { prefixCls: customizePrefixCls, shape, size, src, icon, alt, srcSet } = this.$props;
|
|
|
|
|
2019-09-11 22:35:25 +08:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-11 19:58:32 +08:00
|
|
|
const prefixCls = getPrefixCls('avatar', customizePrefixCls);
|
2018-09-05 21:28:54 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const { isImgExist, scale } = this.$data;
|
2018-09-05 21:28:54 +08:00
|
|
|
|
|
|
|
const sizeCls = {
|
|
|
|
[`${prefixCls}-lg`]: size === 'large',
|
|
|
|
[`${prefixCls}-sm`]: size === 'small',
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-09-05 21:28:54 +08:00
|
|
|
|
|
|
|
const classString = {
|
|
|
|
[prefixCls]: true,
|
|
|
|
...sizeCls,
|
|
|
|
[`${prefixCls}-${shape}`]: shape,
|
|
|
|
[`${prefixCls}-image`]: src && isImgExist,
|
|
|
|
[`${prefixCls}-icon`]: icon,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-09-05 21:28:54 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
const sizeStyle =
|
|
|
|
typeof size === 'number'
|
|
|
|
? {
|
|
|
|
width: `${size}px`,
|
|
|
|
height: `${size}px`,
|
|
|
|
lineHeight: `${size}px`,
|
|
|
|
fontSize: icon ? `${size / 2}px` : '18px',
|
|
|
|
}
|
|
|
|
: {};
|
2018-09-05 21:28:54 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
let children = this.$slots.default;
|
2018-09-05 21:28:54 +08:00
|
|
|
if (src && isImgExist) {
|
2019-01-12 11:33:27 +08:00
|
|
|
children = <img src={src} srcSet={srcSet} onError={this.handleImgLoadError} alt={alt} />;
|
2018-09-05 21:28:54 +08:00
|
|
|
} else if (icon) {
|
2019-01-12 11:33:27 +08:00
|
|
|
children = <Icon type={icon} />;
|
2018-09-05 21:28:54 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
const childrenNode = this.$refs.avatarChildren;
|
2018-09-05 21:28:54 +08:00
|
|
|
if (childrenNode || (scale !== 1 && childrenNode)) {
|
2019-01-12 11:33:27 +08:00
|
|
|
const transformString = `scale(${scale}) translateX(-50%)`;
|
2018-09-05 21:28:54 +08:00
|
|
|
const childrenStyle = {
|
2018-11-28 10:35:37 +08:00
|
|
|
msTransform: transformString,
|
|
|
|
WebkitTransform: transformString,
|
|
|
|
transform: transformString,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
|
|
|
const sizeChildrenStyle =
|
|
|
|
typeof size === 'number'
|
|
|
|
? {
|
|
|
|
lineHeight: `${size}px`,
|
|
|
|
}
|
|
|
|
: {};
|
2018-09-05 21:28:54 +08:00
|
|
|
children = (
|
|
|
|
<span
|
|
|
|
class={`${prefixCls}-string`}
|
2019-01-12 11:33:27 +08:00
|
|
|
ref="avatarChildren"
|
2018-09-05 21:28:54 +08:00
|
|
|
style={{ ...sizeChildrenStyle, ...childrenStyle }}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</span>
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-09-05 21:28:54 +08:00
|
|
|
} else {
|
|
|
|
children = (
|
2019-01-12 11:33:27 +08:00
|
|
|
<span class={`${prefixCls}-string`} ref="avatarChildren">
|
2018-09-05 21:28:54 +08:00
|
|
|
{children}
|
|
|
|
</span>
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-09-05 21:28:54 +08:00
|
|
|
}
|
|
|
|
}
|
2018-03-19 09:43:31 +08:00
|
|
|
return (
|
2019-01-12 11:33:27 +08:00
|
|
|
<span {...{ on: this.$listeners, class: classString, style: sizeStyle }}>{children}</span>
|
|
|
|
);
|
2017-11-09 18:57:34 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|