other / mew-iview

Commit a4a202e395f1bcac9a5b80f5f22f4b3c7ed79891

Authored by daiyanze
1 parent 4f866de5

update avatar slot offsetWidth while data changes

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 @a4a202e
@@ -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 }