update Avatar

梁灏
1 parent c5a721ad
Showing 4 changed files with 116 additions and 7 deletions Show diff stats
examples/routers/avatar.vue
src/components/avatar/avatar.vue
src/styles/components/avatar.less
src/styles/custom.less
 <template>
-    <Avatar></Avatar>
+    <div>
+        <Avatar icon="person" size="large" style="background-color: #fde3cf;color: #f56a00"></Avatar>
+        <Avatar icon="person"></Avatar>
+        <Avatar icon="person" size="small"></Avatar>
+        <Avatar icon="person" size="large" shape="square"></Avatar>
+        <Avatar icon="person" shape="square"></Avatar>
+        <Avatar icon="person" size="small" shape="square"></Avatar>
+        <br><br>
+        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large"></Avatar>
+        <Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460"></Avatar>
+        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small"></Avatar>
+        <Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460" size="large" shape="square"></Avatar>
+        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" shape="square"></Avatar>
+        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small" shape="square"></Avatar>
+        <br><br>
+        <Avatar>Aresn</Avatar>
+        <Avatar>U</Avatar>
+        <Avatar>Tomserm</Avatar>
+        <br><br>
+        <Badge dot>
+            <Avatar icon="person" shape="square"></Avatar>
+        </Badge>
+        <Badge :count="3">
+            <Avatar icon="person" shape="square"></Avatar>
+        </Badge>
+    </div>
 </template>
 <script>
     export default {
 <template>
-    <span>
-
+    <span :class="classes">
+        <img :src="src" v-if="src">
+        <span :class="[prefixCls + '-string']" v-else-if="$slots.default"><slot></slot></span>
+        <Icon :type="icon" v-else-if="icon"></Icon>
     </span>
 </template>
 <script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+
     const prefixCls = 'ivu-avatar';
  
     export default {
         name: 'Avatar',
+        components: { Icon },
         props: {
-
+            shape: {
+                validator (value) {
+                    return oneOf(value, ['circle', 'square']);
+                },
+                default: 'circle'
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large', 'default']);
+                },
+                default: 'default'
+            },
+            src: {
+                type: String
+            },
+            icon: {
+                type: String
+            }
         },
         data () {
             return {
@@ -17,7 +40,17 @@
             };
         },
         computed: {
-
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.shape}`,
+                    `${prefixCls}-${this.size}`,
+                    {
+                        [`${prefixCls}-image`]: !!this.src,
+                        [`${prefixCls}-icon`]: !!this.icon
+                    }
+                ];
+            }
         },
         methods: {
  
 @avatar-prefix-cls: ~"@{css-prefix}avatar";
  
 .@{avatar-prefix-cls} {
+    display: inline-block;
+    text-align: center;
+    background: @avatar-bg;
+    color: @avatar-color;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
  
-}
 \ No newline at end of file
+    .avatar-size(@avatar-size-base, @avatar-font-size-base);
+
+    &-large {
+        .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+    }
+
+    &-small {
+        .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+    }
+
+    &-square {
+        border-radius: @avatar-border-radius;
+    }
+
+    & > img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.avatar-size(@size, @font-size) {
+    width: @size;
+    height: @size;
+    line-height: @size;
+    border-radius: @size / 2;
+
+    & > * {
+        line-height: @size;
+    }
+
+    &.@{avatar-prefix-cls}-icon {
+        font-size: @font-size;
+    }
+}
@@ -161,4 +161,15 @@
 @slider-margin             : 16px 0;
 @slider-button-wrap-size   : 18px;
 @slider-button-wrap-offset : -4px;
-@slider-disabled-color     : #ccc;
 \ No newline at end of file
+@slider-disabled-color     : #ccc;
+
+// Avatar
+@avatar-size-base: 32px;
+@avatar-size-lg: 40px;
+@avatar-size-sm: 24px;
+@avatar-font-size-base: 18px;
+@avatar-font-size-lg: 24px;
+@avatar-font-size-sm: 14px;
+@avatar-bg: #ccc;
+@avatar-color: #fff;
+@avatar-border-radius: @border-radius-small;
 \ No newline at end of file