/** * 转换样式对象 * @param style */ export function transformStyle(style: Record) { const styleObj: Record = {}; for (const key in style) { if (typeof style[key] === "object") { switch (key) { // 背景色对象 case "background": if (style[key].type === "none") styleObj[key] = "none"; if (style[key].type === "color") styleObj[key] = style[key].color; if (style[key].type === "image") { styleObj[ key + "-image" ] = `url(${style[key].image}) no-repeat center center`; styleObj[key + "-size"] = style[key].fillType; } break; // 颜色对象 case "border": if (style[key].type === "none") styleObj[key] = "none"; else styleObj[ key ] = `${style[key].width}px ${style[key].type} ${style[key].color}`; break; // 边框对象 case "borderRadius": if (style[key].type === "all") styleObj[key] = `${style[key].value}${style[key].unit}`; else styleObj[ key ] = `${style[key].topLeft}${style[key].unit} ${style[key].topRight}${style[key].unit} ${style[key].bottomLeft}${style[key].unit} ${style[key].bottomRight}${style[key].unit}`; break; // 阴影对象 case "boxShadow": if (style[key].enabled) { styleObj[key] = `${style[key].offsetX}px ${style[key].offsetY}px ${ style[key].blurRadius }px ${style[key].spreadRadius}px ${style[key].color} ${ style[key].inset ? "inset" : "" }`; } break; // 毛玻璃对象 case "backdropFilter": if (style[key].enabled) styleObj[key] = `blur(${style[key].blur}px)`; break; } } else if (typeof style[key] === "number") { styleObj[key] = style[key] + "px"; } else if (typeof style[key] === "string") { styleObj[key] = style[key]; } } return styleObj; }