Avatar size prop support number px

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>

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) {

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;