26 lines
828 B
Vue
26 lines
828 B
Vue
<template>
|
|
<div class="demo-avatar">
|
|
<Avatar :style="{background: color}">{{ user }}</Avatar>
|
|
<Button size="small" @click="handleChange">Change</Button>
|
|
</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>
|