更新记录

1.0（2024-08-29）

用户将姓名转化为头像 支持中文、英文 例子： Pike Chen 显示效果：PC 陈智 显示效果：陈

平台兼容性

uni-app

uni-app x

姓名转化为头像

用户将姓名转化为头像 支持中文、英文 例子： Pike Chen 显示效果：PC 陈智 显示效果：陈

使用方式：

在 script 中引用组件

import fullnameavatar from "@/components/fullname-avatar/fullname-avatar.vue"
export default {
    components: {fullnameavatar},
    data() {
        return {
            name:'Pike Chen'
        }
    },
}

在 template 中使用组件

<fullnameavatar :username="name" :parser="parser" :inline="true" />

fullnameavatar 属性说明：

backgroundColor 实现刷新变色：

在 template 中使用组件

<fullnameavatar :username="name" :parser="parser" :background-color="extractColorByName(name)"  color="#fff"   :inline="true" />

在 script 中引用组件，跟上面一致

import fullnameavatar from "@/components/fullname-avatar/fullname-avatar.vue"
export default {
    components: {fullnameavatar},
    data() {
        return {
            name:'Pike Chen'
        }
    },
    methods: {
        extractColorByName(name,bgcolor) {
            var colors = [
                "#31bc9f", "#33cc70", "#4a94db", "#9b5fb6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
                "#f1cb1e", "#e6761b", "#e7363b", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
            ];
            var avatarColor = bgcolor==null?colors[Math.floor((Math.random()*colors.length))]:bgcolor==""?bgcolor:colors[Math.floor((Math.random()*colors.length))];
            return avatarColor;
        }
    }
}