Avatar头像

<template>
  <div>
    <div>
      <a-avatar :size="64" icon="user" />
      <a-avatar size="large" icon="user"/>
      <a-avatar icon="user"/>
      <a-avatar size="small" icon="user"/>
    </div>
    <br/>
    <div>
      <a-avatar shape="square" :size="64" icon="user" />
      <a-avatar shape="square" size="large" icon="user" />
      <a-avatar shape="square" icon="user" />
      <a-avatar shape="square" size="small" icon="user" />
    </div>
  </div>
</template>

<template>
  <div>
    <span style="margin-right:24px">
      <a-badge :count="1"><a-avatar shape="square" icon="user" /></a-badge>
    </span>
    <span>
      <a-badge dot><a-avatar shape="square" icon="user" /></a-badge>
    </span>
  </div>
</template>

<template>
  <div>
    <a-avatar icon="user" />
    <a-avatar>U</a-avatar>
    <a-avatar>USER</a-avatar>
    <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
    <a-avatar style="color: #f56a00; backgroundColor: #fde3cf">U</a-avatar>
    <a-avatar style="backgroundColor:#87d068" icon="user" />
  </div>
</template>

<template>
  <div>
    <a-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: 'middle'}">{{avatarValue}}</a-avatar>
    <a-button size="small" :style="{ marginLeft: 16, verticalAlign: 'middle' }" @click="changeValue">改变</a-button>
  </div>
</template>
<script>
  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]
      },
    },
  }
</script>