From 175af763222aa61a93e26033f01b403dab956780 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Fri, 26 Jul 2019 00:46:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=B4=E5=83=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/avatar/index.wc | 111 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 src/avatar/index.wc

diff --git a/src/avatar/index.wc b/src/avatar/index.wc
new file mode 100644
index 0000000..cbc9c35
--- /dev/null
+++ b/src/avatar/index.wc
@@ -0,0 +1,111 @@
+<template>
+  <slot></slot>
+  <img />
+</template>
+
+<style lang="scss">
+:host {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size, 32px);
+  height: var(--size, 32px);
+  line-height: 1;
+  font-size: var(--size, 32px);
+  border-radius: 4px;
+  background: nth($cp, 2);
+  color: nth($cd, 1);
+  user-select: none;
+  -moz-user-select: none;
+
+  img {
+    display: none;
+    width: 100%;
+    height: 100%;
+  }
+  slot {
+    display: block;
+    transform: scale(0.8);
+  }
+}
+
+:host([src]),
+:host([hash]) {
+  slot {
+    display: none;
+  }
+  img {
+    display: block;
+  }
+}
+
+:host([size='large']) {
+  width: 50px;
+  height: 50px;
+  font-size: 36px;
+}
+
+:host([size='medium']) {
+  width: 40px;
+  height: 40px;
+  font-size: 28px;
+}
+
+:host([size='mini']) {
+  width: 24px;
+  height: 24px;
+  font-size: 16px;
+}
+
+:host([circle]) {
+  border-radius: 50%;
+}
+</style>
+
+<script>
+export default class Avatar {
+  props = {
+    hash: '', //哈希头像
+    src: '', // 地址头像
+    fit: '' // 头像填充方式  fill, contain, cover, scale-down
+  }
+
+  constructor() {
+    /* render */
+    this.__IMG__ = this.root.lastElementChild
+  }
+
+  drawHash() {
+    var { hash } = this.props
+
+    if (hash) {
+    }
+  }
+
+  watch(name, old, val) {
+    if (old === val) {
+      return
+    }
+    switch (name) {
+      case 'src':
+        this.removeAttribute('hash')
+        this.__IMG__.src = val || './def.jpg'
+        break
+      case 'hash':
+        this.removeAttribute('src')
+        this.props.hash = val
+
+        this.drawHash()
+
+        break
+
+      case 'fit':
+        if (val) {
+          this.__IMG__.style['object-fit'] = val
+        }
+        break
+    }
+  }
+}
+</script>