2017-08-15 10:07:15 +08:00
|
|
|
<script>
|
2017-08-15 11:03:20 +08:00
|
|
|
import Icon from '../icon';
|
|
|
|
import { oneOf } from '../../utils/assist';
|
|
|
|
|
2017-08-15 10:07:15 +08:00
|
|
|
const prefixCls = 'ivu-avatar';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Avatar',
|
|
|
|
props: {
|
2017-08-15 11:03:20 +08:00
|
|
|
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
|
|
|
|
}
|
2017-08-15 10:07:15 +08:00
|
|
|
},
|
|
|
|
computed: {
|
2017-08-15 11:03:20 +08:00
|
|
|
classes () {
|
|
|
|
return [
|
|
|
|
`${prefixCls}`,
|
|
|
|
`${prefixCls}-${this.shape}`,
|
|
|
|
`${prefixCls}-${this.size}`,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-image`]: !!this.src,
|
|
|
|
[`${prefixCls}-icon`]: !!this.icon
|
|
|
|
}
|
|
|
|
];
|
|
|
|
}
|
2017-08-15 10:07:15 +08:00
|
|
|
},
|
2017-08-15 11:23:52 +08:00
|
|
|
render (h) {
|
|
|
|
let innerNode = '';
|
|
|
|
|
|
|
|
if (this.src) {
|
|
|
|
innerNode = h('img', {
|
|
|
|
attrs: {
|
|
|
|
src: this.src
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else if (this.icon) {
|
|
|
|
innerNode = h(Icon, {
|
|
|
|
props: {
|
|
|
|
type: this.icon
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else if (this.$slots.default) {
|
|
|
|
innerNode = h('span', {
|
|
|
|
'class': `${prefixCls}-string`
|
|
|
|
}, this.$slots.default);
|
|
|
|
}
|
2017-08-15 10:07:15 +08:00
|
|
|
|
2017-08-15 11:23:52 +08:00
|
|
|
return h('span', {
|
|
|
|
'class': this.classes
|
|
|
|
}, [innerNode]);
|
2017-08-15 10:07:15 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|