<template>
  <view
    :class="[size, round ? 'round' : '', radius ? 'radius' : '', color ? 'bg-' + color : '']"
    :style="{
      backgroundImage: src ? `url(${src})` : 'none',
      backgroundColor: color || src ? 'none' : '#ccc'
    }"
    class="cu-avatar"
  >
    <slot></slot>
    <slot name="badge"></slot>
  </view>
</template>

<script>
export default {
  name: 'l-avatar',

  props: {
    src: {},
    size: { default: 'df' },
    round: {},
    radius: {},
    color: {}
  }
}
</script>
