From 04f5779c02eb8c0b272de52740f8a95663b45b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 16 Sep 2019 16:47:23 +0800
Subject: [PATCH] Avatar size prop support number px

---
 examples/routers/avatar.vue       |  4 ++++
 src/components/avatar/avatar.vue  | 22 ++++++++++++++++------
 src/styles/components/avatar.less |  2 +-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/examples/routers/avatar.vue b/examples/routers/avatar.vue
index 4d2b43a4..6e9302ce 100644
--- a/examples/routers/avatar.vue
+++ b/examples/routers/avatar.vue
@@ -34,6 +34,10 @@
         <Avatar custom-icon="ivu-icon-ios-person" />
 
         <Avatar :src="src" size="large" @on-error="handleError" />
+        <Divider></Divider>
+        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="64" shape="square" />
+        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="64" shape="circle" />
+        <Avatar icon="ios-person" size="64" shape="circle" />
     </div>
 </template>
 <script>
diff --git a/src/components/avatar/avatar.vue b/src/components/avatar/avatar.vue
index adac782d..91285f14 100644
--- a/src/components/avatar/avatar.vue
+++ b/src/components/avatar/avatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="classes">
+    <span :class="classes" :style="styles">
         <img :src="src" v-if="src" @error="handleError">
         <Icon :type="icon" :custom="customIcon" v-else-if="icon || customIcon"></Icon>
         <span ref="children" :class="[prefixCls + '-string']" :style="childrenStyle" v-else><slot></slot></span>
@@ -11,6 +11,8 @@
 
     const prefixCls = 'ivu-avatar';
 
+    const sizeList = ['small', 'large', 'default'];
+
     export default {
         name: 'Avatar',
         components: { Icon },
@@ -22,9 +24,7 @@
                 default: 'circle'
             },
             size: {
-                validator (value) {
-                    return oneOf(value, ['small', 'large', 'default']);
-                },
+                type: [String, Number],
                 default () {
                     return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
                 }
@@ -53,13 +53,23 @@
                 return [
                     `${prefixCls}`,
                     `${prefixCls}-${this.shape}`,
-                    `${prefixCls}-${this.size}`,
                     {
                         [`${prefixCls}-image`]: !!this.src,
-                        [`${prefixCls}-icon`]: !!this.icon || !!this.customIcon
+                        [`${prefixCls}-icon`]: !!this.icon || !!this.customIcon,
+                        [`${prefixCls}-${this.size}`]: oneOf(this.size, sizeList)
                     }
                 ];
             },
+            styles () {
+                let style = {};
+                if (this.size && !oneOf(this.size, sizeList)) {
+                    style.width = `${this.size}px`;
+                    style.height = `${this.size}px`;
+                    style.lineHeight = `${this.size}px`;
+                    style.fontSize = `${this.size/2}px`;
+                }
+                return style;
+            },
             childrenStyle () {
                 let style = {};
                 if (this.isSlotShow) {
diff --git a/src/styles/components/avatar.less b/src/styles/components/avatar.less
index e2548b91..eaa7bdea 100644
--- a/src/styles/components/avatar.less
+++ b/src/styles/components/avatar.less
@@ -47,7 +47,7 @@
     width: @size;
     height: @size;
     line-height: @size;
-    border-radius: @size / 2;
+    border-radius: 50%;
 
     & > * {
         line-height: @size;