ColorPicker 颜色选择框

规则

基础示例

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

Props 配置示例

显示颜色预览

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

自定义色板

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

禁用透明度

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

不同尺寸

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

Events 事件示例

监听颜色变化

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "颜色",
    value: '#ff7271',
    props: {
        showPreview: true,
    },
    on: {
        'update:value': (value) => {
            console.log('颜色改变:', value);
        },
        complete: (value) => {
            console.log('颜色选择完成:', value);
        },
    },
}

颜色选择后联动更新

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

完整配置项:naive-ui_ColorPicker

value :String

Props

名称	类型	默认值	说明	版本
default-show	boolean	undefined	默认是否展示弹出层
default-value	string | null	和第一个 mode 对应的黑色值	默认的颜色值
modes	Array<'rgb' | 'hex' | 'hsl' | 'hsv'>	['rgb', 'hex', 'hsl']	颜色选择器支持颜色的格式，注意一旦你在某个模式下选择了值，颜色选择器值的格式将跟随这个格式
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'bottom-start'	面板的弹出位置	2.25.0
render-label	(color: string | null) => VNodeChild	undefined	触发器的内容	2.24.0
show	boolean	undefined	是否展示面板
show-alpha	boolean	true	是否可调节 alpha 通道
show-preview	boolean	false	是否展示颜色预览块
size	'small' | 'medium' | 'large'	'medium'	颜色选择器的尺寸
disabled	boolean	false	是否禁用	2.24.5
swatches	string[]	undefined	色板的值
to	string | HTMLElement	'body'	面板的卸载位置
value	string | null	undefined	颜色选择器的值
on-complete	(value: string) => void	undefined	颜色完成改变后的回调（在鼠标移动时候不会调用）
on-update:show	(value: boolean) => void	undefined	面板可见状态改变的回调
on-update:value	(value: string) => void	undefined	颜色改变时的回调
actions	Array<'confirm'> | null	null	显示按钮