drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Avatar size prop support number px

Browse source
This commit is contained in:
梁灏 2019-09-16 16:47:23 +08:00
parent a03c85df73
commit 04f5779c02
3 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/routers/avatar.vue
View file

@ -34,6 +34,10 @@
<Avatar custom-icon="ivu-icon-ios-person" /> <Avatar custom-icon="ivu-icon-ios-person" />
<Avatar :src="src" size="large" @on-error="handleError" /> <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> </div>
</template> </template>
<script> <script>

22
src/components/avatar/avatar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<span :class="classes"> <span :class="classes" :style="styles">
<img :src="src" v-if="src" @error="handleError"> <img :src="src" v-if="src" @error="handleError">
<Icon :type="icon" :custom="customIcon" v-else-if="icon || customIcon"></Icon> <Icon :type="icon" :custom="customIcon" v-else-if="icon || customIcon"></Icon>
<span ref="children" :class="[prefixCls + '-string']" :style="childrenStyle" v-else><slot></slot></span> <span ref="children" :class="[prefixCls + '-string']" :style="childrenStyle" v-else><slot></slot></span>
@ -11,6 +11,8 @@
const prefixCls = 'ivu-avatar'; const prefixCls = 'ivu-avatar';
const sizeList = ['small', 'large', 'default'];
export default { export default {
name: 'Avatar', name: 'Avatar',
components: { Icon }, components: { Icon },
@ -22,9 +24,7 @@
default: 'circle' default: 'circle'
}, },
size: { size: {
validator (value) { type: [String, Number],
return oneOf(value, ['small', 'large', 'default']);
},
default () { default () {
return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size; return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
} }
@ -53,13 +53,23 @@
return [ return [
`${prefixCls}`, `${prefixCls}`,
`${prefixCls}-${this.shape}`, `${prefixCls}-${this.shape}`,
`${prefixCls}-${this.size}`,
{ {
[`${prefixCls}-image`]: !!this.src, [`${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 () { childrenStyle () {
let style = {}; let style = {};
if (this.isSlotShow) { if (this.isSlotShow) {

2
src/styles/components/avatar.less
View file

@ -47,7 +47,7 @@
width: @size; width: @size;
height: @size; height: @size;
line-height: @size; line-height: @size;
border-radius: @size / 2; border-radius: 50%;
& > * { & > * {
line-height: @size; line-height: @size;