vue-avatar | 基于Vue.js的头像组件

vue-avatar是一个 Vue.js 的头像组件，它可以用来显示用户的头像，如果没有提供头像则会显示用户的缩写。这个组件受到 react-user-avatar 的启发，用户的缩写是由用户名中的空格和破折号进行分割计算得出的，每部分的首字母作为缩写，最多只显示三个字母作为缩写。

vue-avatar用于显示用户头像。如果未提供头像，则使用用户姓名的缩写作为默认头像。这个组件使用用户姓名的规则是：将用户名按空格和破折号分开，然后使用每个部分的第一个字母作为缩写，最多只使用三个字母作为缩写。

使用方法

安装

如果您想使用vue-avatar头像组件，首先您需要安装它，命令如下：

npm install vue-avatar
		

使用

使用vue-avatar的方法是将Avatar.vue组件导入到Vue.js应用程序中。在Vue.js中使用它的示例代码如下：

<template>
  <avatar :username="'John Doe'" />
</template>

import Avatar from 'vue-avatar'

export default {
  ...
  components: {
    Avatar
  },
  ...
}

		

配置参数

vue-avatar头像插件的配置参数有：

• username：属性表示用户的姓名。
• initials：强制显示初始值。
• inline：使用inline-flex代替flex布局。
• size：定义头像的大小，以像素为单位，默认值为50。
• rounded：定义头像是否应该是圆形，默认为true。
• src：头像的URL地址。如果未指定，则将使用Gravatar生成头像。
• customStyle：object对象。用于自定义样式。
• backgroundColor：头像的背景颜色（仅无图片时可见）。
• color：头像字体颜色。
• lighten：-100到100之间的一个值，默认为80。
• parser：自定义解析器。

github网址：https://github.com/eliep/vue-avatar