other / mew-iview

Commit a1530fac5af6a9bed8791aed1fa5b3201d823b7a

Authored by 梁灏
1 parent c5a721ad

update Avatar

Showing 4 changed files with 116 additions and 7 deletions   Show diff stats
Inline Side-by-side
examples/routers/avatar.vue
  Show/Hide comments   View file @a1530fa
1 <template> 1 <template>
2 - <Avatar></Avatar> 2 + <div>
  3 + <Avatar icon="person" size="large" style="background-color: #fde3cf;color: #f56a00"></Avatar>
  4 + <Avatar icon="person"></Avatar>
  5 + <Avatar icon="person" size="small"></Avatar>
  6 + <Avatar icon="person" size="large" shape="square"></Avatar>
  7 + <Avatar icon="person" shape="square"></Avatar>
  8 + <Avatar icon="person" size="small" shape="square"></Avatar>
  9 + <br><br>
  10 + <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large"></Avatar>
  11 + <Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460"></Avatar>
  12 + <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small"></Avatar>
  13 + <Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460" size="large" shape="square"></Avatar>
  14 + <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" shape="square"></Avatar>
  15 + <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small" shape="square"></Avatar>
  16 + <br><br>
  17 + <Avatar>Aresn</Avatar>
  18 + <Avatar>U</Avatar>
  19 + <Avatar>Tomserm</Avatar>
  20 + <br><br>
  21 + <Badge dot>
  22 + <Avatar icon="person" shape="square"></Avatar>
  23 + </Badge>
  24 + <Badge :count="3">
  25 + <Avatar icon="person" shape="square"></Avatar>
  26 + </Badge>
  27 + </div>
3 </template> 28 </template>
4 <script> 29 <script>
5 export default { 30 export default {
src/components/avatar/avatar.vue
  Show/Hide comments   View file @a1530fa
1 <template> 1 <template>
2 - <span>  
3 - 2 + <span :class="classes">
  3 + <img :src="src" v-if="src">
  4 + <span :class="[prefixCls + '-string']" v-else-if="$slots.default"><slot></slot></span>
  5 + <Icon :type="icon" v-else-if="icon"></Icon>
4 </span> 6 </span>
5 </template> 7 </template>
6 <script> 8 <script>
  9 + import Icon from '../icon';
  10 + import { oneOf } from '../../utils/assist';
  11 +
7 const prefixCls = 'ivu-avatar'; 12 const prefixCls = 'ivu-avatar';
8 13
9 export default { 14 export default {
10 name: 'Avatar', 15 name: 'Avatar',
  16 + components: { Icon },
11 props: { 17 props: {
12 - 18 + shape: {
  19 + validator (value) {
  20 + return oneOf(value, ['circle', 'square']);
  21 + },
  22 + default: 'circle'
  23 + },
  24 + size: {
  25 + validator (value) {
  26 + return oneOf(value, ['small', 'large', 'default']);
  27 + },
  28 + default: 'default'
  29 + },
  30 + src: {
  31 + type: String
  32 + },
  33 + icon: {
  34 + type: String
  35 + }
13 }, 36 },
14 data () { 37 data () {
15 return { 38 return {
@@ -17,7 +40,17 @@ @@ -17,7 +40,17 @@
17 }; 40 };
18 }, 41 },
19 computed: { 42 computed: {
20 - 43 + classes () {
  44 + return [
  45 + `${prefixCls}`,
  46 + `${prefixCls}-${this.shape}`,
  47 + `${prefixCls}-${this.size}`,
  48 + {
  49 + [`${prefixCls}-image`]: !!this.src,
  50 + [`${prefixCls}-icon`]: !!this.icon
  51 + }
  52 + ];
  53 + }
21 }, 54 },
22 methods: { 55 methods: {
23 56
src/styles/components/avatar.less
  Show/Hide comments   View file @a1530fa
1 @avatar-prefix-cls: ~"@{css-prefix}avatar"; 1 @avatar-prefix-cls: ~"@{css-prefix}avatar";
2 2
3 .@{avatar-prefix-cls} { 3 .@{avatar-prefix-cls} {
  4 + display: inline-block;
  5 + text-align: center;
  6 + background: @avatar-bg;
  7 + color: @avatar-color;
  8 + white-space: nowrap;
  9 + position: relative;
  10 + overflow: hidden;
4 11
5 -}  
6 \ No newline at end of file 12 \ No newline at end of file
  13 + .avatar-size(@avatar-size-base, @avatar-font-size-base);
  14 +
  15 + &-large {
  16 + .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
  17 + }
  18 +
  19 + &-small {
  20 + .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
  21 + }
  22 +
  23 + &-square {
  24 + border-radius: @avatar-border-radius;
  25 + }
  26 +
  27 + & > img {
  28 + width: 100%;
  29 + height: 100%;
  30 + }
  31 +}
  32 +
  33 +.avatar-size(@size, @font-size) {
  34 + width: @size;
  35 + height: @size;
  36 + line-height: @size;
  37 + border-radius: @size / 2;
  38 +
  39 + & > * {
  40 + line-height: @size;
  41 + }
  42 +
  43 + &.@{avatar-prefix-cls}-icon {
  44 + font-size: @font-size;
  45 + }
  46 +}
src/styles/custom.less
  Show/Hide comments   View file @a1530fa
@@ -161,4 +161,15 @@ @@ -161,4 +161,15 @@
161 @slider-margin : 16px 0; 161 @slider-margin : 16px 0;
162 @slider-button-wrap-size : 18px; 162 @slider-button-wrap-size : 18px;
163 @slider-button-wrap-offset : -4px; 163 @slider-button-wrap-offset : -4px;
164 -@slider-disabled-color : #ccc;  
165 \ No newline at end of file 164 \ No newline at end of file
  165 +@slider-disabled-color : #ccc;
  166 +
  167 +// Avatar
  168 +@avatar-size-base: 32px;
  169 +@avatar-size-lg: 40px;
  170 +@avatar-size-sm: 24px;
  171 +@avatar-font-size-base: 18px;
  172 +@avatar-font-size-lg: 24px;
  173 +@avatar-font-size-sm: 14px;
  174 +@avatar-bg: #ccc;
  175 +@avatar-color: #fff;
  176 +@avatar-border-radius: @border-radius-small;
166 \ No newline at end of file 177 \ No newline at end of file