From a4a202e395f1bcac9a5b80f5f22f4b3c7ed79891 Mon Sep 17 00:00:00 2001 From: daiyanze Date: Wed, 21 Feb 2018 15:55:31 +0900 Subject: [PATCH] update avatar slot offsetWidth while data changes --- src/components/avatar/avatar.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/avatar/avatar.vue b/src/components/avatar/avatar.vue index 97d0d23..075aab3 100644 --- a/src/components/avatar/avatar.vue +++ b/src/components/avatar/avatar.vue @@ -38,6 +38,7 @@ return { prefixCls: prefixCls, scale: 1, + childrenWidth: 0, isSlotShow: false }; }, @@ -62,7 +63,7 @@ transform: `scale(${this.scale})`, position: 'absolute', 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; @@ -72,11 +73,12 @@ setScale () { this.isSlotShow = !this.src && !this.icon; 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; // add 4px gap for each side to get better performance - if (avatarWidth - 8 < childrenWidth) { - this.scale = (avatarWidth - 8) / childrenWidth; + if (avatarWidth - 8 < this.childrenWidth) { + this.scale = (avatarWidth - 8) / this.childrenWidth; } else { this.scale = 1; } -- libgit2 0.21.4