@@ -11,8 +11,8 @@ export class AvatarComponent implements OnChanges, OnInit {
1111 isNobody = true ;
1212 isErrorImg = false ;
1313 /**
14- * 自定义头像显示文字
15- */
14+ * 自定义头像显示文字
15+ */
1616 @Input ( ) gender : 'male' | 'female' | string ;
1717 /**
1818 * avatar宽度
@@ -22,45 +22,46 @@ export class AvatarComponent implements OnChanges, OnInit {
2222 * avatar高度
2323 */
2424 @Input ( ) height = 36 ;
25-
2625 /**
2726 * 是否是圆形n
2827 */
2928 @Input ( ) isRound = true ;
30-
3129 /**
3230 * 是否是图片
3331 */
3432 @Input ( ) imgSrc : string ;
3533 /**
36- * 用户名称
37- */
34+ * 用户名称
35+ */
3836 @Input ( ) name : string ;
3937 /**
4038 * 自定义头像显示文字
4139 */
4240 @Input ( ) customText : string ;
43-
41+ /**
42+ * 头像中间文字最小尺寸
43+ */
44+ MINIMUM_FONT_SIZE = 12 ;
4445 fontSize = 12 ;
4546 code : number ;
4647 nameDisplay : string ;
47- constructor ( ) { }
48+
4849 ngOnInit ( ) : void {
4950 this . calcValues ( this . customText ? this . customText : this . name ) ;
5051 }
52+
5153 ngOnChanges ( changes : SimpleChanges ) : void {
52- if ( changes [ 'width' ] && ! changes [ 'width' ] . isFirstChange ( ) ||
53- changes [ 'customText' ] && ! changes [ 'customText' ] . isFirstChange ( ) ||
54- changes [ 'gender' ] && ! changes [ 'gender' ] . isFirstChange ( ) ||
55- changes [ 'height' ] && ! changes [ 'height' ] . isFirstChange ( ) ||
56- changes [ 'name' ] && ! changes [ 'name' ] . isFirstChange ( )
57- ) {
54+ const { width, customText, gender, height, name } = changes ;
55+ const result = [ width , customText , gender , height , name ] . map ( ( item ) => item && ! item . isFirstChange ( ) ) ;
56+ if ( result . includes ( true ) ) {
5857 this . calcValues ( this . customText ? this . customText : this . name ) ;
5958 }
6059 }
60+
6161 showErrAvatar ( ) {
6262 this . isErrorImg = true ;
6363 }
64+
6465 calcValues ( nameInput ) {
6566 const userName = nameInput ;
6667 const minNum = Math . min ( this . width , this . height ) ;
@@ -74,8 +75,10 @@ export class AvatarComponent implements OnChanges, OnInit {
7475 } else {
7576 this . isNobody = true ;
7677 }
77- this . fontSize = minNum / 4 + 3 ;
78+ const size = minNum / 4 + 3 ;
79+ this . fontSize = size < this . MINIMUM_FONT_SIZE ? this . MINIMUM_FONT_SIZE : size ;
7880 }
81+
7982 setDisplayName ( name , width ) {
8083 if ( this . customText ) {
8184 this . nameDisplay = this . customText ;
@@ -109,6 +112,7 @@ export class AvatarComponent implements OnChanges, OnInit {
109112 }
110113 this . getBackgroundColor ( name . substr ( 0 , 1 ) ) ;
111114 }
115+
112116 getBackgroundColor ( char ) {
113117 if ( this . gender ) {
114118 if ( this . gender . toLowerCase ( ) === 'male' ) {
0 commit comments