vue中根据用户昵称首字母生成头像和颜色_vue-avatar

需求:项目中需要做一个粗糙的评论板块,用户评论时需要显示头像,但是不需要去更换改头像
思路:用户昵称首字母作为头像,并且根据用户首字母生成固定的颜色,否则每次颜色都会随机
例如:

方法一
1.安装头像插件

npm install vue-avatar
1

2.引用

//template部分
<Avatar :username="name" :src="name" :background-color="extractColorByName(name)" color="#fff" style="vertical-align: middle;" :inline="true" />

//script部分
import Avatar from 'vue-avatar'

export default {
  ...
  data() {
    return {
    	name:'张三'
     }
  },
  components: {
    Avatar
  },
  ...
  methods(){
  //传入名字,根据名字生成颜色,这样颜色就固定下来了
	extractColorByName(name) {
	      var temp = [];
	      temp.push("#");
	      for (let index = 0; index < name.length; index++) {
	        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
	      }
	      return temp.slice(0, 5).join('').slice(0, 4);
	    },
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

方法二

直接使用elementUI的el-avatar也是不错的选择

<el-avatar :style="`background:${extractColorByName('管理员')}`"> 管理员 </el-avatar>
1

可以自己定义这个头像框的大小,如果小了,昵称会显示不全,所以如果想只显示首字母汉字,建议使用第一种,如果想显示全称,建议选择第二种.

参考博客☝