ColorPicker 颜色选择框

规则

基础示例

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

Props 配置示例

支持透明度

const rule = {
    type: "ColorPicker",
    field: "bgColor",
    title: "背景颜色",
    value: '#ff7271',
    props: {
        showAlpha: true,
        colorFormat: 'rgba',
    },
}

预定义颜色

const rule = {
    type: "ColorPicker",
    field: "themeColor",
    title: "主题颜色",
    value: '#409EFF',
    props: {
        predefine: [
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585',
        ],
    },
}

不同尺寸

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

Events 事件示例

监听颜色变化

const rule = {
    type: "ColorPicker",
    field: "color",
    title: "主题颜色",
    value: '#409EFF',
    on: {
        change: (value) => {
            console.log('颜色改变:', value);
        },
        'active-change': (value) => {
            console.log('当前显示颜色:', value);
        },
        focus: (event) => {
            console.log('获得焦点:', event);
        },
        blur: (event) => {
            console.log('失去焦点:', event);
        },
    },
}

颜色变化后更新预览

const rule = [
    {
        type: "ColorPicker",
        field: "color",
        title: "主题颜色",
        value: '#409EFF',
        inject: true,
        on: {
            change: ($inject, value) => {
                // 更新颜色预览
                $inject.api.setValue('colorPreview', value);
            },
        },
    },
    {
        type: "input",
        field: "colorPreview",
        title: "颜色值",
        props: {
            disabled: true,
        },
    },
]

完整配置项:Element_ColorPicker

value :String

Props

属性名	说明	类型	默认值
disabled	是否禁用	boolean	false
size	尺寸	enum	—
showAlpha	是否支持透明度选择	boolean	false
colorFormat	写入 v-model 的颜色的格式	enum	—
popperClass	ColorPicker 下拉框的类名	string	—
predefine	预定义颜色	object	—
validateEvent	输入时是否触发表单的校验	boolean	true
tabindex	ColorPicker 的 tabindex	string / number	0
ariaLabel	ColorPicker 的 aria-label	string	—
id	ColorPicker 的 id	string	—
teleported	是否将 popover 的下拉列表渲染至 body 下	boolean	true

Events

事件名	说明	类型
change	当绑定值变化时触发	Function
active-change	面板中当前显示的颜色发生改变时触发	Function
focus	当获得焦点时触发	Function
blur	当失去焦点时触发	Function