当前位置：首页 > VUE

vue实现头像组件

2026-01-17 08:43:52VUE

Vue 头像组件实现

基础实现

创建一个可复用的头像组件，支持图片链接或文字缩写显示：

<template>
  <div class="avatar" :style="avatarStyle">
    <img v-if="src" :src="src" :alt="alt" @error="handleError">
    <span v-else class="avatar-text">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 40
    },
    text: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: '#ccc'
    },
    textColor: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {
      imageError: false
    }
  },
  computed: {
    avatarStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        lineHeight: `${this.size}px`,
        backgroundColor: this.bgColor,
        color: this.textColor
      }
    }
  },
  methods: {
    handleError() {
      this.imageError = true
    }
  }
}
</script>

<style scoped>
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: bold;
  text-transform: uppercase;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-text {
  font-size: calc(40% + 1vw);
}
</style>

高级功能扩展

添加更多功能如形状选择、状态指示和悬停效果：

<template>
  <div 
    class="avatar-wrapper"
    :class="[shape, { 'has-status': status }]"
    :style="{ '--status-color': statusColor }"
  >
    <div class="avatar" :style="avatarStyle">
      <img v-if="src && !imageError" :src="src" :alt="alt" @error="handleError">
      <span v-else class="avatar-text">{{ text }}</span>
    </div>
    <div v-if="status" class="status-indicator"></div>
  </div>
</template>

<script>
export default {
  props: {
    shape: {
      type: String,
      default: 'circle',
      validator: value => ['circle', 'square', 'rounded'].includes(value)
    },
    status: {
      type: Boolean,
      default: false
    },
    statusColor: {
      type: String,
      default: '#4CAF50'
    },
    // 保留基础props
  },
  // 保留基础data, computed, methods
}
</script>

<style scoped>
.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.avatar-wrapper.circle .avatar {
  border-radius: 50%;
}

.avatar-wrapper.square .avatar {
  border-radius: 0;
}

.avatar-wrapper.rounded .avatar {
  border-radius: 20%;
}

.status-indicator {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--status-color);
  bottom: 0;
  right: 0;
  border: 2px solid white;
}

.avatar:hover {
  opacity: 0.9;
  transform: scale(1.05);
  transition: all 0.3s ease;
}
</style>

使用示例

<template>
  <div>
    <!-- 基础用法 -->
    <Avatar src="https://example.com/avatar.jpg" alt="用户头像" />

    <!-- 文字缩写 -->
    <Avatar text="VU" size="60" bgColor="#2196F3" />

    <!-- 高级用法 -->
    <Avatar 
      src="https://example.com/avatar.jpg" 
      shape="rounded" 
      size="80" 
      status 
      statusColor="#FF5722"
    />
  </div>
</template>

<script>
import Avatar from './components/Avatar.vue'

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