JavaScript 根据元素深浅色背景，动态设置黑白文字颜色

前情提要：项目中包含自定义标签展示(el-tag)，可自定义标签的背景颜色以及文字，文字的颜色是默认的黑色，但如果背景颜色选择过深，标签内的文字就不明显了，针对这个问题，做出的修改对策就是动态的文字颜色展示-----根据标签深浅色背景，动态设置黑白文字颜色 

一。成果预览

背景颜色是通过element UI组件的ColorPicker 颜色选择器进行选择设置的

返回值为16进制颜色值  eg:#FF0000

二。功能代码

以下代码是在js文件中封装的共同方法，因为是项目迭代开发，如果提炼共通组件变更就会比较多，因此只提炼共同方法，改动较小

// 根据深浅色背景，动态设置黑色白色文字颜色
export function dynamicColor(val) {
     // 16进制颜色值的正则
     let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
     // 把颜色值变成小写
     let color = val.toLowerCase()
     let result = ''
     if (reg.test(color)) {
         // 如果只有三位的值，需变成六位，如：#fff => #ffffff
         if (color.length === 4) {
            let colorNew = "#"
             for (let i = 1; i < 4; i += 1) {
                 colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
             }
             color = colorNew
         }
         // 处理六位的颜色值，转为RGB
         let colorChange = []
         for (let i = 1; i < 7; i += 2) {
             colorChange.push(parseInt("0x" + color.slice(i, i + 2)))
         }
         let grayLevel = colorChange[0] * 0.299 + colorChange[1] * 0.587 + colorChange[2] * 0.114
         if (grayLevel >= 192) {
           //浅色模式
           return '#000'
         } else {
           return '#fff'
         }
     } else {
         result = '无效';
         return { rgb: result }
     }
 }

方法调用处

在组件页面(.vue)文件中调用
注：简单的将相关的功能代码抽了出来，如果有哪部分功能没展示出来，可以滴滴我

<template >
    <div >
            <el-form ref="classesForm"
                     label-width="135px"
                     :model="attndClassesConfig"
            >
                <el-form-item label="班次颜色"
                              prop="classesColor"
                >
                    <div class="classes-area" >
                        <el-color-picker v-model="attndClassesConfig.classesColor" />
                        <div v-if="!['#FFFFFF', '#ffffff', '#000000', null]
                                    .includes(attndClassesConfig.classesColor)" 
                                    class="classes-area-content"
                            >
                            显示预览
                            <el-tag :color="attndClassesConfig.classesColor"
                                    size="small"
                                    class="classes-tag"
                            >
                                <span id="previews-color" >班次名称</span>
                            </el-tag>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
    </div>
</template>

<script >
import { dynamicColor } from '@/utils/colorbinaryConversion'

export default {
  name: 'Test',
  data() {
    return {
      attndClassesConfig：{
        classesColor：''
      }  
    }
  }，
  watch:{
    // 班次颜色变更
    'attndClassesConfig.classesColor': {
      handler(newVal, oldVal) {
        // 设置默认颜色
        if (newVal === '') {
          this.attndClassesConfig.classesColor = '#ffffff'
        }
        // 显示预览颜色设置(预览颜色不可为空，白色，黑色)
        if (newVal && !['#FFFFFF', '#ffffff', '#000000', null].includes(newVal)) {
          setTimeout(() => {
            // 字体颜色设置
            document.getElementById('previews-color').style.color = dynamicColor(newVal)
          })
        }
      },
      immediate: true
    },
  },

}
</script>


<style scoped lang="scss" >
.classes-area{
    display: flex;
    align-items: center;
    .classes-area-content {
      display: flex;
      margin-left: 20px;
      align-items: center;
    }
    .classes-tag{
        width: 92px;
        margin-left: 7px;
        // margin-top: 15px;
        text-align: center;
        color: #D7D7D7;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:hover{
          cursor: pointer;
        }
    }
}
</style>