ColorPicker 颜色选择器 处理rgba
颜色rgba转对象或数组
目标: 通过传参方式,返回处理过的数据, 参数类型可以是string字符串,也可以是数组,具体可转格式如下
- string字符串转对象
rgba(153, 5, 5, 1) 转化为
color: {
r: '153',
g: '5',
b: '5',
a: '1'
}
- 字符串数组转对象数组
[ 'rgba(153, 5, 5, 1)', 'rgba(153, 5, 5, 1)' ] 转化为
[
{
r: 153,
g: 5,
b: 5,
a: 1
},
{
r: 153,
g: 5,
b: 5,
a: 1
}
]
代码部分
/**
* rgba(153, 5, 5, 1)转 { r: 153, g: 5, b: 5, a: 1 }
* rgba处理函数
* @params {*} string/Array => obj/Array
*/
export const colorObj = (str) => {
let obj = {};
let arr = [];
if (str) {
if (Object.prototype.toString.call(str) === "[object Array]") { //判断数据类型
for (let key in str) {
let strArr = [];
let strObj = {};
strArr = str[key]
.split("(")[1]
.split(")")[0]
.split(","); // 将rgba分割成数组
strObj.r = Number(strArr[0].trim());
strObj.g = Number(strArr[1].trim());
strObj.b = Number(strArr[2].trim());
strObj.a = Number(strArr[3].trim());
arr.push(strObj);
}
return arr;
} else {
arr = str
.split("(")[1]
.split(")")[0]
.split(",");
if (arr.length == 4) {
obj.r = Number(arr[0].trim());
obj.g = Number(arr[1].trim());
obj.b = Number(arr[2].trim());
obj.a = Number(arr[3].trim());
} else {
return str; // 传参有误处理
}
}
return obj;
} else {
return str; // 传null处理
}
};
对象或数组转颜色rgba
通过传参方式,返回处理过的数据, 参数类型可以是string字符串,也可以是数组,具体可转格式如下
- 对象转string字符串
color: {
r: '153',
g: '5',
b: '5',
a: '1'
}
转化为
rgba(153, 5, 5, 1)
- 对象数组转字符串数组
[
{
r: 153,
g: 5,
b: 5,
a: 1
},
{
r: 153,
g: 5,
b: 5,
a: 1
}
]
转化为
[ 'rgba(153, 5, 5, 1)', 'rgba(153, 5, 5, 1)' ]
代码部分
/**
* { r: 153, g: 5, b: 5, a: 1 } 转 rgba(153, 5, 5, 1)
* [{ r: 153, g: 5, b: 5, a: 1 },{ r: 153, g: 5, b: 5, a: 1 }] 转 ['rgba(153, 5, 5, 1)','rgba(153, 5, 5, 1)']
* rgba处理函数
* @params {*} obj => str
*/
export const colorStr = (obj) => {
let arr = [];
if (obj) {
if (Object.prototype.toString.call(obj) === "[object Array]") {
for(let key in obj) {
arr.push(`rgba(${obj[key].r},${obj[key].g},${obj[key].b},${obj[key].a})`)
}
return arr;
} else {
return `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`;
}
} else {
return obj;
}
};
写在最后的话, 该处理函数主要用于element-ui组件库ColorPicker 颜色选择器 的处理