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= stringToColor2、使用字符串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
<p>{{ $stringToColor('HelloWorld') }}</p>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151148.html
