uniapp 自定义 圆形头像组件，可以修改大小样式

以下是一个简单的 uniapp 自定义圆形头像组件的示例代码，可以修改大小、样式等。

<template>
  <view class="circle-avatar" :style="{ width: size + 'px', height: size + 'px', background: color }">
    <image :src="src" mode="aspectFit" :style="{ width: size + 'px', height: size + 'px', borderRadius: size + 'px' }"></image>
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 100
    },
    color: {
      type: String,
      default: '#fff'
    }
  }
}
</script>

<style scoped>
.circle-avatar {
  position: relative;
  overflow: hidden;
}
</style>

使用该组件时，可以传入不同的 `src`、`size` 和 `color` 属性来自定义圆形头像的样式，例如：

<template>
  <view>
    <circle-avatar src="https://placekitten.com/200/200" size="150" color="#f00">
      <text style="color: #fff; font-size: 24px;">Hello</text>
    </circle-avatar>
  </view>
</template>

<script>
import CircleAvatar from '@/components/CircleAvatar'

export default {
  components: {
    CircleAvatar
  }
}
</script>

在上述示例中，我们传入了一个图片地址作为头像，设置了大小为 150px，背景色为红色，并在组件内部插入了一个文本节点。可以根据实际需求进行修改和定制。