Item.vue

<template>
  <tooltip v-if="tips !== ''">
    <template slot="title">{{ tips }}</template>
    <avatar :size="avatarSize" :src="src" />
  </tooltip>
  <avatar v-else :size="avatarSize" :src="src" />
</template>

<script>
  import Avatar from 'ant-design-vue/es/avatar'
  import Tooltip from 'ant-design-vue/es/tooltip'

  export default {
    name: "AvatarItem",
    components: {
      Avatar,
      Tooltip
    },
    props: {
      tips: {
        type: String,
        default: '',
        required: false
      },
      src: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        size: this.$parent.size
      }
    },
    computed: {
      avatarSize () {
        return this.size !== 'mini' && this.size || 20
      }
    },
    watch: {
      '$parent.size' (val) {
        this.size = val
      }
    }
  }
</script>