63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<avatar size="large" icon="user"/>
|
|
<avatar icon="user"/>
|
|
<avatar size="small" icon="user"/>
|
|
</div>
|
|
<br/>
|
|
<div>
|
|
<avatar shape="square" size="large" icon="user" />
|
|
<avatar shape="square" icon="user" />
|
|
<avatar shape="square" size="small" icon="user" />
|
|
</div>
|
|
<br/>
|
|
<div>
|
|
<avatar icon="user" />
|
|
<avatar>U</avatar>
|
|
<avatar>USER</avatar>
|
|
<avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
|
<avatar :styles="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</avatar>
|
|
<avatar :styles="{ backgroundColor: '#87d068' }" icon="user" />
|
|
</div>
|
|
<br/>
|
|
<div>
|
|
<avatar shape="square" size="large" :styles="{'backgroundColor': color}">{{avatarValue}}</avatar>
|
|
<AntButton @click="changeValue">改变</AntButton>
|
|
</div>
|
|
<br/>
|
|
<div>
|
|
<Badge count=1><Avatar shape="square" icon="user" /></Badge>
|
|
<br/>
|
|
<Badge dot><Avatar shape="square" icon="user" /></Badge>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import '../style'
|
|
import { Avatar, Button, Badge } from 'antd/index'
|
|
|
|
const UserList = ['U', 'Lucy', 'Tom', 'Edward']
|
|
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
|
|
export default {
|
|
data () {
|
|
return {
|
|
avatarValue: UserList[0],
|
|
color: colorList[0],
|
|
}
|
|
},
|
|
methods: {
|
|
changeValue () {
|
|
const index = UserList.indexOf(this.avatarValue)
|
|
this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
|
|
this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
|
|
},
|
|
},
|
|
components: {
|
|
Avatar,
|
|
AntButton: Button,
|
|
Badge,
|
|
},
|
|
}
|
|
</script>
|