github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix avatar

pull/9/head
wangxueliang 2017-11-10 10:28:49 +08:00
parent e7289f61e9
commit 89edb61027
2 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/avatar/Avatar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span :class="classes" :style="style"> <span :class="classes" :style="styles">
<img v-if="src" :src="src"/> <img v-if="src" :src="src"/>
<icon v-else-if="icon" :type="icon" /> <icon v-else-if="icon" :type="icon" />
<span <span
@ -12,7 +12,7 @@
</span> </span>
</template> </template>
<script> <script>
import Icon from '../icon/index' import Icon from '../icon'
export default { export default {
name: 'Avatar', name: 'Avatar',
@ -22,27 +22,23 @@ export default {
default: 'ant-avatar', default: 'ant-avatar',
}, },
shape: { shape: {
validator (val) { validator: (val) => (['circle', 'square'].includes(val)),
return ['circle', 'square'].includes(val)
},
default: 'circle', default: 'circle',
}, },
size: { size: {
validator (val) { validator: (val) => (['small', 'large', 'default'].includes(val)),
return ['small', 'large', 'default'].includes(val)
},
default: 'default', default: 'default',
}, },
styles: {
type: Object,
default: () => ({}),
},
src: String, src: String,
icon: String, icon: String,
style: {
type: Object,
default: {},
},
}, },
data () { data () {
return { return {
isExitSlot: false, isExistSlot: false,
scale: 1, scale: 1,
} }
}, },
@ -51,23 +47,23 @@ export default {
const { prefixCls, shape, size, src, icon } = this const { prefixCls, shape, size, src, icon } = this
return { return {
[`${prefixCls}`]: true, [`${prefixCls}`]: true,
[`${prefixCls}-image`]: !!src,
[`${prefixCls}-icon`]: !!icon,
[`${prefixCls}-${shape}`]: true, [`${prefixCls}-${shape}`]: true,
[`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small', [`${prefixCls}-sm`]: size === 'small',
[`${prefixCls}-image`]: !!src,
[`${prefixCls}-icon`]: !!icon,
} }
}, },
childrenStyle () { childrenStyle () {
const children = this.$refs.avatorChildren const children = this.$refs.avatorChildren
let style = {} let style = {}
if (this.isExitSlot) { if (this.isExistSlot) {
style = { style = {
msTransform: `scale(${this.scale})`, msTransform: `scale(${this.scale})`,
WebkitTransform: `scale(${this.scale})`, WebkitTransform: `scale(${this.scale})`,
transform: `scale(${this.scale})`, transform: `scale(${this.scale})`,
position: 'absolute', position: 'absolute',
display: 'inline-block', // display: 'inline-block',
left: `calc(50% - ${Math.round(children.offsetWidth / 2)}px)`, left: `calc(50% - ${Math.round(children.offsetWidth / 2)}px)`,
} }
} }
@ -76,11 +72,12 @@ export default {
}, },
methods: { methods: {
setScale () { setScale () {
this.isExitSlot = !this.src && !this.icon const { src, icon, $refs, $el } = this
const children = this.$refs.avatorChildren const children = $refs.avatorChildren
this.isExistSlot = !src && !icon
if (children) { if (children) {
const childrenWidth = children.offsetWidth const childrenWidth = children.offsetWidth
const avatarWidth = this.$el.getBoundingClientRect().width const avatarWidth = $el.getBoundingClientRect().width
if (avatarWidth - 8 < childrenWidth) { if (avatarWidth - 8 < childrenWidth) {
this.scale = (avatarWidth - 8) / childrenWidth this.scale = (avatarWidth - 8) / childrenWidth
} else { } else {

4
components/avatar/demo/index.vue
View File

@ -15,8 +15,8 @@
<avatar>U</avatar> <avatar>U</avatar>
<avatar>USER</avatar> <avatar>USER</avatar>
<avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> <avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<avatar :style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</avatar> <avatar :styles="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</avatar>
<avatar :style="{ backgroundColor: '#87d068' }" icon="user" /> <avatar :styles="{ backgroundColor: '#87d068' }" icon="user" />
</div> </div>
<div> <div>
<avatar shape="square" size="large">{{avatarValue}}</avatar> <avatar shape="square" size="large">{{avatarValue}}</avatar>