avatar.vue
1.95 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
48
49
50
51
52
53
54
<template>
<div class="demo-avatar">
<Avatar :style="{background: color}">{{ user }}</Avatar>
<Button size="small" @click="handleChange">Change</Button>
<div>
<div class="demo-avatar">
<Avatar icon="ios-person" size="large" />
<Avatar icon="ios-person" />
<Avatar icon="ios-person" size="small" />
</div>
<div class="demo-avatar">
<Avatar shape="square" icon="ios-person" size="large" />
<Avatar shape="square" icon="ios-person" />
<Avatar shape="square" icon="ios-person" size="small" />
</div>
</div>
<div class="demo-avatar">
<Avatar icon="ios-person" />
<Avatar>U</Avatar>
<Avatar>USER</Avatar>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
<Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar>
<Avatar style="background-color: #87d068" icon="ios-person" />
</div>
<div class="demo-avatar-badge">
<Badge :count="1">
<Avatar shape="square" icon="ios-person" />
</Badge>
<Badge dot>
<Avatar shape="square" icon="ios-person" />
</Badge>
</div>
</div>
</template>
<script>
const UserList = ['二', '小二', '三', '二个人'];
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
export default {
data () {
return {
user: UserList[0],
color: ColorList[0]
}
},
methods: {
handleChange () {
const index = UserList.indexOf(this.user);
this.user = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
this.color = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0];
}
}
}
</script>