完成头像组件

Readme.md

@@ -13,11 +13,11 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (33/54)
+### 开发进度 && 计划 (34/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
-- [ ] `wc-avatar` 头像组件
+- [x] `wc-avatar` 头像组件
 - [x] `wc-badge` 徽标组件
 - [x] `wc-drawer` 抽屉组件
 - [x] `wc-collapse` 折叠组件

src/avatar/index.js

@@ -3,3 +3,106 @@
  * @author yutent<yutent.io@gmail.com>
  * @date 2023/04/25 09:27:25
  */
+import { html, raw, css, Component, nextTick } from '@bd/core'
+import '../icon/index.js'
+
+class Avatar extends Component {
+  static props = {
+    src: {
+      type: String,
+      default: null
+    }
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: inline-flex;
+        border-radius: 4px;
+      }
+
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 2px;
+        border-radius: inherit;
+        text-align: center;
+        background: var(--color-grey-3);
+        color: #fff;
+        user-select: none;
+
+        img {
+          width: 100%;
+          height: 100%;
+          border-radius: inherit;
+          -webkit-user-drag: none;
+        }
+      }
+
+      :host([src]) {
+        .avatar {
+          padding: 0;
+        }
+      }
+      :host([round]) {
+        border-radius: 50%;
+      }
+    `,
+    // 尺寸
+    css`
+      @use 'sass:map';
+      $sizes: (
+        s: (
+          h: 20px,
+          f: 12px
+        ),
+        m: (
+          h: 24px,
+          f: 12px
+        ),
+        l: (
+          h: 32px,
+          f: 14px
+        ),
+        xl: (
+          h: 36px,
+          f: 14px
+        ),
+        xxl: (
+          h: 44px,
+          f: 14px
+        )
+      );
+
+      @loop $s, $v in $sizes {
+        :host([size='#{$s}']) {
+          width: map.get($v, 'h');
+          height: map.get($v, 'h');
+          font-size: map.get($v, 'f');
+          --size: #{map.get($v, 'h') - 8px};
+        }
+      }
+    `
+  ]
+
+  mounted() {
+    if (this.textContent.trim().length > 4) {
+      this.textContent = this.textContent.trim().slice(0, 4)
+    }
+  }
+
+  render() {
+    return html`
+      <div class="avatar">
+        ${this.src
+          ? html`<img src=${this.src} />`
+          : html`<slot><wc-icon name="user"></wc-icon></slot>`}
+      </div>
+    `
+  }
+}
+
+Avatar.reg('avatar')