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

1、安装头像插件

npm install vue-avatar

2、引用

//template部分
 <div v-for="(item,index) in nameList" :key="index">
 <Avatar :username="item.name" :src="item.name" 
:background-color="extractColorByName(item.name)" 
color="#fff" style="vertical-align: middle;" :inline="true" />  
  </div>

//script部分
import Avatar from 'vue-avatar'
export default {
 components: {    Avatar
  },
  data() {
    return {
    	 nameList:[  
                {name:'张三'}, 
                {name:'李四'},
                {name:'王二'}      ]
     }
  },
  
  
  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);
	    },
	}
} 

3、完成效果