基于Vue2.X使用CRC32或Unicode编码生成字符串对应的颜色值

1、使用crc-32转换字符串来生成16进制颜色值

npm install crc-32

utils/colorUtil.js

import Vue from 'vue'
import CRC32 from 'crc-32'

const stringToColor = (str) => {
    if (str) {
        str = Math.abs(CRC32.str(str)).toString(10);
        return '#' + str.substring(0, 6);
    } else {
        return 'transparent'; // 透明
    }
}

Vue.prototype.$stringToColor= stringToColor

2、使用字符串Unicode编码生成RGB颜色值

utils/colorUtil.js

import Vue from 'vue'

const stringToColor = (str) => {
    let hash = 0;
    for (var i = 0; i < str.length; i++) {
        hash = hash * 31 + str.charCodeAt(i);
        hash = intValue(hash);
    }
    let r = (hash & 0xFF0000) >> 16;
    let g = (hash & 0x00FF00) >> 8;
    let b = (hash & 0x0000FF);
    return 'rgba(' + r + ',' + g + ',' + b + ',' + '0.2)';
}

function intValue(num) {
    var MAX_VALUE = 0x7fffffff;
    var MIN_VALUE = -0x80000000;
    if(num > MAX_VALUE || num < MIN_VALUE)
    {
        return num &= 0xFFFFFFFF;
    }
    return num;
}

Vue.prototype.$stringToColor = stringToColor

最后要在main.js加上导入该脚本

import './utils/colorUtil'

使用方法

例子1

let color = this.$stringToColor("这是一段字符串");
console.log(color);


例子2
{{ $stringToColor('HelloWorld') }}