vue实现头像组件

Vue 头像组件实现

基础头像组件实现

创建一个基础的Vue头像组件，支持图片URL或文字占位符。

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

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: 'Avatar'
    },
    name: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 40
    },
    backgroundColor: {
      type: String,
      default: '#ccc'
    },
    textColor: {
      type: String,
      default: '#fff'
    }
  },
  computed: {
    initials() {
      if (!this.name) return '?'
      const parts = this.name.split(' ')
      return parts.map(part => part[0].toUpperCase()).join('')
    },
    avatarStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        'background-color': this.backgroundColor,
        color: this.textColor,
        'font-size': `${this.size * 0.4}px`
      }
    }
  }
}
</script>

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

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

使用示例

<template>
  <div>
    <Avatar src="https://example.com/avatar.jpg" alt="User Avatar" />
    <Avatar name="John Doe" />
    <Avatar name="Jane Smith" :size="60" backgroundColor="#4a6fa5" />
  </div>
</template>

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

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

高级功能扩展

添加更多功能如在线状态指示、边框效果等。

<template>
  <div class="avatar-container" :style="containerStyle">
    <div class="avatar" :style="avatarStyle">
      <img v-if="src" :src="src" :alt="alt" />
      <span v-else class="initials">{{ initials }}</span>
    </div>
    <span v-if="online" class="online-status" :style="statusStyle"></span>
  </div>
</template>

<script>
export default {
  props: {
    // 基础props同上
    online: {
      type: Boolean,
      default: false
    },
    borderColor: {
      type: String,
      default: '#fff'
    },
    borderWidth: {
      type: Number,
      default: 2
    }
  },
  computed: {
    // 基础computed同上
    containerStyle() {
      return {
        width: `${this.size + this.borderWidth * 2}px`,
        height: `${this.size + this.borderWidth * 2}px`
      }
    },
    statusStyle() {
      return {
        width: `${this.size * 0.25}px`,
        height: `${this.size * 0.25}px`,
        'background-color': this.online ? '#4caf50' : '#f44336'
      }
    }
  }
}
</script>

<style scoped>
.avatar-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  border: v-bind('`${borderWidth}px solid ${borderColor}`');
}

.online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  border: 2px solid v-bind('borderColor');
}
</style>

性能优化

添加图片加载失败处理，使用懒加载技术。

<template>
  <div class="avatar" :style="avatarStyle">
    <img
      v-if="src && !imageError"
      :src="src"
      :alt="alt"
      @error="handleImageError"
      loading="lazy"
    />
    <span v-else class="initials">{{ initials }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageError: false
    }
  },
  methods: {
    handleImageError() {
      this.imageError = true
    }
  },
  watch: {
    src() {
      this.imageError = false
    }
  }
}
</script>

响应式设计

添加响应式大小控制，适应不同屏幕尺寸。

<script>
export default {
  props: {
    size: {
      type: [Number, String],
      default: 'medium',
      validator: value => {
        return (
          typeof value === 'number' ||
          ['small', 'medium', 'large'].includes(value)
        )
      }
    }
  },
  computed: {
    computedSize() {
      const sizeMap = {
        small: 32,
        medium: 48,
        large: 64
      }
      return typeof this.size === 'number' ? this.size : sizeMap[this.size]
    },
    avatarStyle() {
      return {
        width: `${this.computedSize}px`,
        height: `${this.computedSize}px`
        // 其他样式
      }
    }
  }
}
</script>