2c5faf30
 梁灏
init Avatar compo...
|
1
|
<template>
|
|
a1530fac
梁灏
update Avatar
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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>
|
|
ad225578
梁灏
add Avatar component
|
17
18
19
20
21
22
23
|
<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 }}
|
|
a1530fac
梁灏
update Avatar
|
24
25
26
27
28
29
30
|
<br><br>
<Badge dot>
<Avatar icon="person" shape="square"></Avatar>
</Badge>
<Badge :count="3">
<Avatar icon="person" shape="square"></Avatar>
</Badge>
|
|
ad225578
梁灏
add Avatar component
|
31
|
<Button @click="change">change</Button>
|
|
a1530fac
梁灏
update Avatar
|
32
|
</div>
|
|
2c5faf30
梁灏
init Avatar compo...
|
33
34
35
|
</template>
<script>
export default {
|
|
ad225578
梁灏
add Avatar component
|
36
37
38
39
40
41
42
43
44
45
|
data () {
return {
name: 'Aresn'
}
},
methods: {
change () {
this.name = 'Tomserm'
}
}
|
|
2c5faf30
梁灏
init Avatar compo...
|
46
47
|
}
</script>
|
