Vue-10-头像组件

一、概述

在我其中的一项工作经历中，经历了前后端分工的安排，转向了完全的后端，导致前端的技术水平一直保持在jquery、css2这些基础知识认知。虽然自己在有空的时候也会学习vue、css3以及新的脚手架这些新的技术，但是毕竟没有通过项目的验证，学习的东西不够深入。借着这股大环境逐渐恶劣的东风，以及AI，再次面向全栈。
本次练习一个头像组件的开发avatar。

二、核心

核心的样式

.avatar {
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 实现圆形 */
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  overflow: hidden;
}

三、实现

组件完整实现

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

<script>
export default {
  name: 'Avatar',
  props: {
    src: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: 'User avatar'
    },
    size: {
      type: Number,
      default: 40
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      hasImageError: false
    }
  },
  computed: {
    avatarStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        fontSize: `${this.size / 2}px`
      }
    },
    initials() {
      if (!this.name) return ''
      return this.name.split(' ').map(n => n[0]).join('').toUpperCase()
    }
  },
  methods: {
    handleImageError() {
      this.hasImageError = true
    }
  }
}
</script>

<style scoped>
.avatar {
  display: flex;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 实现圆形 */
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  overflow: hidden;
}

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

引用组件

<template>
  <div class="avatar-demo">
    <h1>Avatar Demo</h1>
    <Avatar :src="imageUrl" :size="60" alt="Demo Avatar" />
    <Avatar name="John Doe" :size="60" />
  </div>
</template>

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

export default {
  name: 'AvatarDemo',
  components: {
    Avatar
  },
  data() {
    return {
      imageUrl: require('@/assets/avatar_1.png')
    }
  },
}
</script>

<style scoped>
.avatar-demo {
  padding: 20px;
}
</style>

四、总结

本次最主要的是CSS的应用，实现过程中自己找了一张图片，但是折腾了1-2分钟才正常引入。将图片的链接作为变量，通过requrie引入，使用了@别名的路径方式。