trs-ui-app/es/util/useParseBg.js

TRS 可视化低代码平台 前端移动 UI 组件库 👍

function checkIsColor(bgVal) {
    let type = '';
    if (/^rgb\(/.test(bgVal)) {
        type = '^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$';
    }
    else if (/^rgba\(/.test(bgVal)) {
        type = '^[rR][gG][Bb][Aa][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){3}[\\s]*(1|1.0|0|0.[0-9])[\\s]*[\)]{1}$';
    }
    else if (bgVal.startsWith('#')) {
        type = '^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$';
    }
    else if (/^hsl\(/.test(bgVal)) {
        type = '^[hH][Ss][Ll][\(]([\\s]*(2[0-9][0-9]|360｜3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*)[\)]$';
    }
    else if (/^hsla\(/.test(bgVal)) {
        type = '^[hH][Ss][Ll][Aa][\(]([\\s]*(2[0-9][0-9]|360｜3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,){2}([\\s]*(1|1.0|0|0.[0-9])[\\s]*)[\)]$';
    }
    const re = new RegExp(type);
    return bgVal.match(re) !== null;
}
function useParseBg(bgVal) {
    if (!bgVal)
        return '';
    if (checkIsColor(bgVal)) {
        return bgVal;
    }
    return `url(${bgVal})`;
}

export { useParseBg as default };