携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

本来想在某一项目中在用户信息里加入头像，和后端沟通了一波说是如果用户自己上传图片作为头像的话行不通，说是最好提前准备好一些头像，或者去整个图床啥的感觉太麻烦了，本来后台管理的头像并不是刚需，但是我又想让用户多一些可以自己决定的元素，于是就想到用这种文字头像，可以自己定义文字颜色与背景颜色。

效果图

graph LR
点击修改头像 --> 弹出框出现 --> A{用户自由搭配颜色}
A --点击取消--> 关闭弹窗并初始化选色器
A --点击确定--> 关闭弹窗并向服务器发送请求

代码

弹窗控制按钮

因为我这个是使用了ElementUI的<el-dialog>标签，所以需要一个变量来控制该弹窗的开关，于是可以选择添加一个按钮来控制该弹窗，如果你不想使用弹窗来，显示修改头像的组件，该步骤可忽略。

<el-button @click="openTry">修改头像</el-button>

methods中加入如下函数

openTry() {
    this.dialogVisible = true
},
cancelTry() {
    this.backColor = this.user.backColor
    this.fontColor = this.user.fontColor
    this.closeTry()
},

cancelTry是必要的一个函数，如果用户点击修改头像后调试了一波发现还是现在这个好看，并且关掉了弹窗后，弹窗中的内容将改为初始值（即用户目前的头像相关数值）。

data中需要加入dialogVisible:false，这些是ElementUI官网的事例，就不再展示了。

修改头像

<el-dialog :visible.sync="dialogVisible" width="30%">
    <el-avatar :size="'large'" :style="tryColor"> {{realName}} </el-avatar>
    <div class="colorGroup">
        <div class="backColor">
            <p>背景色:</p>
            <el-color-picker v-model="backColor"></el-color-picker>
        </div>
        <div class="fontColor">
            <p>字体色:</p>
            <el-color-picker v-model="fontColor"></el-color-picker>
        </div>
    </div>
    <span slot="footer">
        <el-button @click="cancelTry">取 消</el-button>
        <el-button type="primary" @click="accessColor">确 定</el-button>
    </span>
</el-dialog>

.colorGroup {
    position: relative;
}
.backColor {
    top: -150px;
    left: 200px;
}
.fontColor {
    top: -50px;
    left: 200px;
}

realName变量是我存在vuex里的一个变量,用于头像中间应该填入的文字，我在这里没有展示出相关代码，你可以自己在data中设置。

computed: {
    tryColor() {
        return `background-color:${this.backColor};color:${this.fontColor}`
    },
},

下面是确认修改头像后向服务器发送的请求，中间有一些发送后的处理代码。

this.$message是ElementUI中一个弹出消息提示的API，仅用于提示用户操作结果，在弹出几秒后便会自己关闭。

closeTry()在上面“弹窗控制按钮”中已经有代码展示，用于关闭弹窗并且将弹窗内的用户尝试色彩搭配的数据初始化

accessColor() {
    this.$axios.post('/index/updateColor', JSON.stringify({
        backColor: this.backColor,
        fontColor: this.fontColor,
        userId: this.user.userId
    }), {
        headers: {
            "Content-Type": "application/json;charset=utf-8"
        }
    }).then(
        response => {
            this.$message({
                message: '修改成功',
                type: 'success'
            });
            let colorObj = {
                fontColor: this.fontColor,
                backColor: this.backColor
            }
            this.$store.commit('AVATAR', colorObj)
            this.closeTry()
        },
        error => {
            
            this.$message(error.message);
        }
    )
}

由于在页面的很多地方都在用头像的相关数据，于是我将其存入了vuex以便后续的多次调用，下方展示相关vuex中的内容

const mutations = {
    AVATAR(state,value){
        state.backColor = value.backColor
        state.fontColor = value.fontColor
    }
}

调用方法

由于头像信息会被很多组件使用，于是将其存在了vuex中，下面是vuex中调用头像信息的getter。

const getters = {
    getColor(state){
        return `background-color:${state.backColor};color:${state.fontColor}`
    },
}

在使用时，在ElementUI的组件<el-avatar>中动态设置style。

例如

<el-avatar :size="'large'" :style="getColor"> 张三 </el-avatar>

computed: {
    ...mapGetters(['getColor'])
}

注意：:size需要传入的是一个字符串，如果写成:size="large"是不对的，双引号内的内容将会被当成js代码来解析，large会被认为是一个变量而不是字符串。

Vue2+ElementUI制作的可自定义文字头像

效果图

代码

弹窗控制按钮

修改头像

调用方法