ColorPicker

Rules

Basic Example

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

Props Configuration Examples

Show Color Preview

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Theme Color",
    value: '#ff7271',
    props: {
        showPreview: true,
        showAlpha: true,
    }
}

Custom Color Swatches

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

Disable Alpha Channel

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Color",
    value: '#ff7271',
    props: {
        showAlpha: false,
    }
}

Different Sizes

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Color",
    value: '#ff7271',
    props: {
        size: "large",
    }
}

Events Examples

Handle Color Changes

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "Color",
    value: '#ff7271',
    props: {
        showPreview: true,
    },
    on: {
        'update:value': (value) => {
            console.log('Color changed:', value);
        },
        complete: (value) => {
            console.log('Color selection completed:', value);
        },
    },
}

Linkage Update After Color Selection

const rule = [
    {
        type: "ColorPicker",
        field: "primaryColor",
        title: "Primary Color",
        value: '#ff7271',
        props: {
            showPreview: true,
        },
        inject: true,
        on: {
            complete: ($inject, value) => {
                // Generate secondary color from primary color
                const secondaryColor = lightenColor(value, 0.2);
                $inject.api.setValue('secondaryColor', secondaryColor);
            },
        },
    },
    {
        type: "ColorPicker",
        field: "secondaryColor",
        title: "Secondary Color",
        value: '#ff9999',
        props: {
            showPreview: true,
            disabled: true,
        },
    },
]

Complete configuration items: naive-ui_ColorPicker

value :String

Props

Name	Type	Default Value	Description	Version
default-show	boolean	undefined	Default whether to show popup layer
default-value	string | null	Black value corresponding to first mode	Default color value
modes	Array<'rgb' | 'hex' | 'hsl' | 'hsv'>	['rgb', 'hex', 'hsl']	Color formats supported by color picker, note that once you select a value in a mode, the color picker value format will follow this format
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	Popup position of panel	2.25.0
render-label	(color: string | null) => VNodeChild	undefined	Trigger content	2.24.0
show	boolean	undefined	Whether to show panel
show-alpha	boolean	true	Whether alpha channel can be adjusted
show-preview	boolean	false	Whether to show color preview block
size	'small' | 'medium' | 'large'	'medium'	Size of color picker
disabled	boolean	false	Whether disabled	2.24.5
swatches	string[]	undefined	Color swatch values
to	string | HTMLElement	'body'	Unmount position of panel
value	string | null	undefined	Value of color picker
on-complete	(value: string) => void	undefined	Callback after color change is completed (not called during mouse movement)
on-update:show	(value: boolean) => void	undefined	Callback when panel visibility changes
on-update:value	(value: string) => void	undefined	Callback when color changes
actions	Array<'confirm'> | null	null	Display buttons