@form-create/designer/src/config/rule/color.js

好用的Vue低代码可视化表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。

import uniqueId from '@form-create/utils/lib/unique';
import {localeProps} from '../../utils';

const label = '颜色选择器';
const name = 'colorPicker';

export default {
    menu: 'main',
    icon: 'icon-color',
    label,
    name,
    input: true,
    event: ['change', 'activeChange'],
    validate: ['string'],
    rule({t}) {
        return {
            type: name,
            field: uniqueId(),
            title: t('com.colorPicker.name'),
            info: '',
            $required: false,
            props: {},
        };
    },
    props(_, {t}) {
        return localeProps(t, name + '.props', [
            {
                type: 'switch',
                field: 'disabled'
            },
            {
                type: 'switch',
                field: 'showAlpha'
            },
            {
                type: 'select',
                field: 'colorFormat',
                options: [{label: 'hsl', value: 'hsl'}, {label: 'hsv', value: 'hsv'}, {
                    label: 'hex',
                    value: 'hex'
                }, {label: 'rgb', value: 'rgb'}]
            },
            {
                type: 'tableOptions',
                field: 'predefine',
                props: {
                    column: [{label: t('props.value'), key: 'value'}],
                    valueType: 'string'
                }
            },
        ]);
    }
};