ColorPicker 颜色选择框

规则

基础示例

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "颜色",
    value: '#ff7271',
}

Props 配置示例

禁用透明度

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "主题颜色",
    value: '#ff7271',
    props: {
        enableAlpha: false,
    }
}

预设颜色

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "颜色",
    value: '#ff7271',
    props: {
        swatchColors: [
            '#FF6B6B',
            '#4ECDC4',
            '#45B7D1',
            '#FFA07A',
            '#98D8C8',
        ],
    }
}

Events 事件示例

监听颜色变化

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "颜色",
    value: '#ff7271',
    on: {
        change: (value) => {
            console.log('颜色改变:', value);
        },
    },
}

颜色选择后联动更新

const rule = [
    {
        type: "ColorPicker",
        field: "primaryColor",
        title: "主题色",
        value: '#ff7271',
        inject: true,
        on: {
            change: ($inject, value) => {
                // 根据主题色自动生成辅助色
                const secondaryColor = lightenColor(value, 0.2);
                $inject.api.setValue('secondaryColor', secondaryColor);
            },
        },
    },
    {
        type: "ColorPicker",
        field: "secondaryColor",
        title: "辅助色",
        value: '#ff9999',
        props: {
            disabled: true,
        },
    },
]

完整配置项:TDesign_ColorPicker

value :String