原组件地址

https://www.naiveui.com/zh-CN/os-theme/components/avatar

Angular版本地址

https://blog.heyliubo.top/ng-naive-ui/components/avatar/examples

image.png

image.png**avatar.component.ts

  1. import { Component, OnInit, HostBinding, Input, ElementRef, SimpleChanges } from '@angular/core';
  3. /**
  4.  * 头像组件
  5.  */
  6. @Component({
  7.     selector: 'n-avatar',
  8.     templateUrl: './avatar.component.html',
  9.     styleUrls: ['./style/style.scss']
  10. })
  11. export class naiveAvatarComponent implements OnInit {
  12.     /** 头像是否带边框 */
  13.     @Input() bordered = false;
  14.     /** 头像的背景色 */
  15.     @Input() color = undefined;
  16.     /** 头像加载失败时显示的图片的地址 */
  17.     @Input('fallback-src') fallbackSrc = undefined;
  18.     /** 头像的图片在容器内的的适应类型 */
  19.     @Input('object-fit') objectFit = 'fill';
  20.     /** 头像的尺寸 */
  21.     @Input() size: 'small' | 'medium' | 'large' | number = 'medium';
  22.     /** 头像的地址 */
  23.     @Input() src: string = undefined;
  24.     /** 在Angular中，如果<n-avatar round></n-avatar>这么使用，Input，则在组件中取值为空字符串'' */
  25.     /** 头像是否圆形 */
  26.     @Input() round: boolean | string = false;
  27.     /** 头像的图片加载失败执行的回调 */
  28.     @Input('on-error') onError: (e: Event) => void = undefined;
  30.     /** 变量类型是否为string */
  31.     isString(value: string | number) {
  32.         return typeof value === 'string';
  33.     }
  35.     /** 变量类型是否为number */
  36.     isNumber(value: string | number) {
  37.         return typeof value === 'number';
  38.     }
  40.     /** 私有变量，用来设置图片尺寸class */
  41.     get _size() {
  42.         // 将值返给ngClass使用
  43.         return { [this.size]: this.isString(this.size) };
  44.     }
  46.     /** 构建行内样式css变量 */
  47.     generateStyle() {
  48.         const stack = [];
  49.         this.isNumber(this.size) ? stack.push(`--n-merged-size:${this.size}px`) : '';
  50.         this.round ? stack.push(`--n-border-radius: 50%`) : '';
  51.         return stack.join(';');
  52.     }
  54.     /** 私有变量，用来设置行内样式，因为返给ngStyle会报错，无法使用css变量，所以返给[style] */
  55.     get _style() {
  56.         let value = this.generateStyle();
  57.         return value;
  58.     }
  60.     /** 生命周期 */
  61.     ngOnChanges(changes: SimpleChanges /* 暂时用不到，后续可能会用到这个参数 */) {
  62.         /** 在Angular中，如果<n-avatar round></n-avatar>这么使用，Input，则在组件中取值为空字符串'' */
  63.         this.round = this.round === '' ? true : false;
  64.     }
  66.     /** 生命周期 */
  67.     ngOnInit(): void {}
  68. }

avatar.component.html

  1. <span class="n-avatar" [ngClass]="_size" [style]="_style">
  2.   <img [src]="src" alt="" />
  3. </span>

更新中…