vue实现头像组件

Vue 头像组件实现

基础实现

创建一个基本的头像组件，接收图片 URL 作为 prop，并显示默认头像作为备用。

<template>
  <div class="avatar">
    <img
      :src="src || defaultAvatar"
      :alt="alt"
      @error="handleError"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: String,
    alt: {
      type: String,
      default: 'User avatar'
    },
    size: {
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      defaultAvatar: 'path/to/default-avatar.png'
    }
  },
  methods: {
    handleError() {
      this.src = this.defaultAvatar
    }
  }
}
</script>

<style scoped>
.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

圆形裁剪与尺寸控制

通过计算属性动态设置样式，实现不同尺寸的头像显示。

<script>
export default {
  // ...其他代码
  computed: {
    avatarStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        lineHeight: `${this.size}px`,
        fontSize: `${this.size / 2}px`
      }
    }
  }
}
</script>

<style scoped>
.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}
</style>

字母头像功能

当没有图片时，显示用户名字的首字母作为头像。

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

<script>
export default {
  props: {
    name: String,
    // ...其他props
  },
  computed: {
    initials() {
      if (!this.name) return ''
      const parts = this.name.split(' ')
      let initials = parts[0].charAt(0)
      if (parts.length > 1) {
        initials += parts[parts.length - 1].charAt(0)
      }
      return initials
    }
  }
}
</script>

高级功能实现

添加 hover 效果、在线状态指示器等增强功能。

<template>
  <div class="avatar-container">
    <div class="avatar" :style="avatarStyle">
      <!-- 原有头像内容 -->
      <div v-if="online" class="online-indicator"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    online: Boolean,
    // ...其他props
  }
}
</script>

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

.online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #4CAF50;
  border-radius: 50%;
  border: 2px solid white;
}

.avatar:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}
</style>

组件使用示例

<template>
  <div>
    <Avatar src="user.jpg" alt="John Doe" size="60" />
    <Avatar name="John Doe" size="60" online />
    <Avatar size="40" />
  </div>
</template>

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

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

以上实现涵盖了头像组件的基本功能和常见扩展需求，可以根据实际项目需要进行调整和扩展。