vue中根据用户昵称首字母生成头像和颜色 |
您所在的位置：网站首页 › 字母头像图片ly › vue中根据用户昵称首字母生成头像和颜色 |
vue中根据用户昵称首字母生成头像和颜色
|
需求:项目中需要做一个粗糙的评论板块,用户评论时需要显示头像,但是不需要去更换改头像 思路:用户昵称首字母作为头像,并且根据用户首字母生成固定的颜色,否则每次颜色都会随机 例如: 2.引用 //template部分 //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); }, } }方法二 直接使用elementUI的el-avatar也是不错的选择 管理员可以自己定义这个头像框的大小,如果小了,昵称会显示不全,所以如果想只显示首字母汉字,建议使用第一种,如果想显示全称,建议选择第二种.
参考博客☝ |
方法一 1.安装头像插件
【本文地址】
今日新闻 |
推荐新闻 |