avatar.vue
1.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
<div>
<Avatar icon="person" size="large" style="background-color: #fde3cf;color: #f56a00"></Avatar>
<Avatar icon="person"></Avatar>
<Avatar icon="person" size="small"></Avatar>
<Avatar icon="person" size="large" shape="square"></Avatar>
<Avatar icon="person" shape="square"></Avatar>
<Avatar icon="person" size="small" shape="square"></Avatar>
<br><br>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large"></Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small"></Avatar>
<Avatar src="https://avatars2.githubusercontent.com/u/5370542?v=4&s=460" size="large" shape="square"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" shape="square"></Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="small" shape="square"></Avatar>
<br><br>
<Avatar size="large">Leo</Avatar>
<Avatar size="large">A</Avatar>
<Avatar size="default">A</Avatar>
<Avatar size="small">A</Avatar>
<Avatar size="large">Tomserm</Avatar>
<Avatar size="large">{{ name }}</Avatar>
{{ name }}
<br><br>
<Badge dot>
<Avatar icon="person" shape="square"></Avatar>
</Badge>
<Badge :count="3">
<Avatar icon="person" shape="square"></Avatar>
</Badge>
<Button @click="change">change</Button>
</div>
</template>
<script>
export default {
data () {
return {
name: 'Aresn'
}
},
methods: {
change () {
this.name = 'Tomserm'
}
}
}
</script>