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

update avatar slot offsetWidth while data changes

Browse source
This commit is contained in:
daiyanze 2018-02-21 15:55:31 +09:00
parent 4f866de5d1
commit a4a202e395
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;
} }