前言
遇到一个情况，需要把客户端用的色值ARBG用在前端。
错误的展示
ARBG格式的颜色直接填入background是这个效果。
原因是因为，在css里八位的色值为RGBA
color
hex-color
其实不看文档也能隐隐觉得不对劲，因为在chrome是这样的
chrome里
16进制的数值
因为#FF1A71FF的透明度是FF。
透明度越小越透明，越大越不透明。0xFF是十进制的255，代表不透明，所以这个色值直接去掉透明度，RGB为#1A71FF
实际的颜色
ARBG到RGBA
经过上面的分析，解法很简单了，反正css的color是支持16进制的八位色值的，那就把AARRBBGG换成RRBBGGAA好了。
特别地
RGBA可以为4位，这样一个字母代表一个通道。
就像#FFF代表#FFFFFF一样，照样用那个还没修改的RGBA组件证实一下。
写全
缩写
chrome转换的结果是完全一致的。
效果
#FF1A71FF
修改透明度
#1F1A71FF
代码
/* eslint-disable react/no-array-index-key */
import { Input } from 'antd';
import { useMemo } from 'react';
import $styles from './style.module.less';
interface PropsType {
onChange?: () => void;
value?: string;
}
/** 用于输入颜色的Input */
export default function (props: PropsType) {
const { value = '', onChange } = props;
const maskColor = useMemo(() => {
if (!value && value.length !== 9 && value.length !== 5) return '';
if (value.length === 5) {
return `#${value[2]}${value[3]}${value[4]}${value[1]}`;
}
if (value.length === 9) {
return `#${value[3]}${value[4]}${value[5]}${value[6]}${value[7]}${value[8]}${value[1]}${value[2]}`;
}
return value;
}, [value]);
return (
<div className={$styles.ColorInput}>
<Input
placeholder="请输入颜色"
value={value}
onChange={onChange}
style={{
width: '100px',
borderBottom: '1px solid #eee',
marginRight: '5px',
}}
bordered={false}
/>
<div className={$styles.colorArea} >
<div className={$styles.mask} style={{ background: maskColor }} />
{value && Array(25).fill(0).map((_, key) => <div className={$styles.square} key={key} />)}
</div>
</div>
);
}
// style.module.less
.ColorInput {
display: flex;
.colorArea {
position: relative;
width: 30px;
height: 30px;
border: 1px solid #eee;
border-radius: 9px;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.square {
width: 20%;
height: 20%;
&:nth-child(odd) {
background: rgba(0, 0, 0, 0.15);
}
}
}
}
参考：
网友评论