drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3040 from daiyanze/Fix/avatar_center

Browse source 
[Bug Fix] Avatar's slot content not being center after update
This commit is contained in:
Aresn 2018-02-26 10:13:24 +08:00 • committed by GitHub
commit f4174ccd1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/avatar/avatar.vue
View file

@ -38,6 +38,7 @@
return { return {
prefixCls: prefixCls, prefixCls: prefixCls,
scale: 1, scale: 1,
childrenWidth: 0,
isSlotShow: false isSlotShow: false
}; };
}, },
@ -62,7 +63,7 @@
transform: `scale(${this.scale})`, transform: `scale(${this.scale})`,
position: 'absolute', position: 'absolute',
display: 'inline-block', display: 'inline-block',
left: `calc(50% - ${Math.round(this.$refs.children.offsetWidth / 2)}px)` left: `calc(50% - ${Math.round(this.childrenWidth / 2)}px)`
}; };
} }
return style; return style;
@ -72,11 +73,12 @@
setScale () { setScale () {
this.isSlotShow = !this.src && !this.icon; this.isSlotShow = !this.src && !this.icon;
if (this.$refs.children) { if (this.$refs.children) {
const childrenWidth = this.$refs.children.offsetWidth; // set children width again to make slot centered
this.childrenWidth = this.$refs.children.offsetWidth;
const avatarWidth = this.$el.getBoundingClientRect().width; const avatarWidth = this.$el.getBoundingClientRect().width;
// add 4px gap for each side to get better performance // add 4px gap for each side to get better performance
if (avatarWidth - 8 < childrenWidth) { if (avatarWidth - 8 < this.childrenWidth) {
this.scale = (avatarWidth - 8) / childrenWidth; this.scale = (avatarWidth - 8) / this.childrenWidth;
} else { } else {
this.scale = 1; this.scale = 1;
} }