CSS 样式键转换
如 fontSize -> font-size
js
// 函数封装 -- CSS样式键转换,如 fontSize -> font-size
function CSSformatKey(oldKey) {
// 查找所有大写字母,转换为 "-小写"
const newKey = oldKey.replace(/[A-Z]/g, (c) => `-${c.toLocaleLowerCase()}`);
return newKey;
}
let oldKey = 'fontSize';
let result = CSSformatKey(oldKey);
console.log(result);
CSS 样式单位转换
px 转 vw
js
// 函数封装 -- CSS样式单位转换,如 375px -> 100vw
function px2vw(components = []) {
// 正则匹配 '10px' '9.5px',并对数值分组
const reg = /^(\d+(\.\d+)?)px$/;
components.forEach((component) => {
const props = component.props || {};
// 遍历组件的属性
Object.keys(props).forEach((key) => {
const val = props[key];
// 非字符串无需转换;
if (typeof val !== 'string') {
return;
}
// 无px则无需转换
if (reg.test(val) === false) {
return;
}
// 取得匹配的分组,第1项为匹配的所有内容,如375px,第2项为匹配到的px前的数值,如375
const arr = val.match(reg) || [];
// 提取出数值部分
const numStr = arr[1];
// 将字符串数值转换为数字
const num = parseFloat(numStr);
// 因UI图的画布宽度是 375px,即100vw = 375px 则px 转 vw 的公式为 100vw = 375px/375*100
const vwNum = (num / 375) * 100;
// 避免无法除尽,保留两位小数
props[key] = `${vwNum.toFixed(2)}vw`;
});
});
}
let components = [
{
props: {
height: '100px',
},
},
{
props: {
height: '140px',
},
},
];
px2vw(components);
console.log(components);
结果为:
js
[ { props: { height: '26.67vw' } }, { props: { height: '37.33vw' } } ]