other / 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 38 return {
39 39 prefixCls: prefixCls,
40 40 scale: 1,
  41 + childrenWidth: 0,
41 42 isSlotShow: false
42 43 };
43 44 },
... ... @@ -62,7 +63,7 @@
62 63 transform: `scale(${this.scale})`,
63 64 position: 'absolute',
64 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 69 return style;
... ... @@ -72,11 +73,12 @@
72 73 setScale () {
73 74 this.isSlotShow = !this.src && !this.icon;
74 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 78 const avatarWidth = this.$el.getBoundingClientRect().width;
77 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 82 } else {
81 83 this.scale = 1;
82 84 }
... ...