chenhaodong / mew-iview

Commit f4174ccd1b74d3cb980944993e4e130e74789072

Authored by Aresn
Committed by GitHub
2 parents 7600961f a4a202e3

Merge pull request #3040 from daiyanze/Fix/avatar_center 

[Bug Fix] Avatar's slot content not being center after update
Showing 1 changed file with 6 additions and 4 deletions   Show diff stats
Inline Side-by-side
src/components/avatar/avatar.vue
  Show/Hide comments   View file @f4174cc
@@ -38,6 +38,7 @@ @@ -38,6 +38,7 @@
38 return { 38 return {
39 prefixCls: prefixCls, 39 prefixCls: prefixCls,
40 scale: 1, 40 scale: 1,
  41 + childrenWidth: 0,
41 isSlotShow: false 42 isSlotShow: false
42 }; 43 };
43 }, 44 },
@@ -62,7 +63,7 @@ @@ -62,7 +63,7 @@
62 transform: `scale(${this.scale})`, 63 transform: `scale(${this.scale})`,
63 position: 'absolute', 64 position: 'absolute',
64 display: 'inline-block', 65 display: 'inline-block',
65 - left: `calc(50% - ${Math.round(this.$refs.children.offsetWidth / 2)}px)` 66 + left: `calc(50% - ${Math.round(this.childrenWidth / 2)}px)`
66 }; 67 };
67 } 68 }
68 return style; 69 return style;
@@ -72,11 +73,12 @@ @@ -72,11 +73,12 @@
72 setScale () { 73 setScale () {
73 this.isSlotShow = !this.src && !this.icon; 74 this.isSlotShow = !this.src && !this.icon;
74 if (this.$refs.children) { 75 if (this.$refs.children) {
75 - const childrenWidth = this.$refs.children.offsetWidth; 76 + // set children width again to make slot centered
  77 + this.childrenWidth = this.$refs.children.offsetWidth;
76 const avatarWidth = this.$el.getBoundingClientRect().width; 78 const avatarWidth = this.$el.getBoundingClientRect().width;
77 // add 4px gap for each side to get better performance 79 // add 4px gap for each side to get better performance
78 - if (avatarWidth - 8 < childrenWidth) {  
79 - this.scale = (avatarWidth - 8) / childrenWidth; 80 + if (avatarWidth - 8 < this.childrenWidth) {
  81 + this.scale = (avatarWidth - 8) / this.childrenWidth;
80 } else { 82 } else {
81 this.scale = 1; 83 this.scale = 1;
82 } 84 }