<template>
  <div class="bk-avatar" :class='shape'>
    <img :src="url" alt="头像" class='avatar-img' @click='clickAvatar'>
  </div>
</template>
<script>

/** 头像组件
 * url： 头像路径
 * shape: 头像形状，目前支持圆形 circle, 方形： square
 * clickAvatar: 点击头像事件
 * 其他： 头像大小由外层控制，占层的100%
*/
export default {
  props: {
    url: {
      type: String,
      default () {
        return '/static/images/default-avatar.svg'
      }
    },
    shape: {
      type: String,
      default () {
        return 'circle'
      }
    },
    clickAvatar: ['Function']
  },
  data: () => {},
  methods: {}
}
</script>

<style>
.bk-avatar {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.bk-avatar img {
  width: 100%;
  height: 100%;
}
.circle {
  border-radius: 50%;
}

.square {
  border-radius: 10px;
}

</style>

