扩展自定义属性教程

FormCreate 提供了强大的扩展机制，允许开发者通过自定义属性实现复杂的业务逻辑和动态表单生成。本文将详细介绍如何定义和使用自定义属性，以及如何在实际业务场景中应用这些功能。

自定义属性的基本概念

通过自定义属性扩展，您可以为表单组件定义特定的行为或逻辑，例如动态数据加载、验证规则、或其他业务逻辑处理。自定义属性可以在表单生成规则中进行配置，并在组件的生命周期中触发相应的回调。

内置自定义属性

• 必填验证: required
• 远程数据加载: fetch
• 静态数据加载: loadData
• 组件内自定义验证: componentValidate

定义自定义属性扩展

要创建一个自定义属性扩展，您需要定义一个属性对象，并注册到 FormCreate 中。以下是一个完整的示例：

1. 定义自定义属性

const optionEffect = {
    //自定义属性的名称
    name: 'option',
    //属性绑定的组件,不设置或者'*'默认为全部组件
    components: '*',
    //rule初始化
    init({value}, rule, fapi) {
    },
    //rule开始加载
    load({value}, rule, fapi) {
    },
    //rule初始化完
    created({value}, rule, fapi) {
    },
    //rule加载完成
    loaded({value}, rule, fapi) {
    },
    //属性值发生变化
    watch({value}, rule, fapi) {
    },
    //组件的值发生变化
    value({value}, rule, fapi) {
    },
    //control 生效
    control({value}, rule, fapi) {
    },
    //rule 移除
    deleted({value}, rule, fapi) {
    },
    //rule 生成
    mounted({value}, rule, fapi) {
    }
}

2. 注册自定义属性 注册自定义属性扩展后，您可以在规则中使用它：

formCreate.register(optionEffect)

3. 在规则中使用自定义属性

在生成规则中，您可以通过 effect 属性来使用自定义属性：

{
    type: 'input',
    field: 'username',
    title: '用户名',
    effect: {
    option: 'someValue'  // 使用自定义属性
    }
}

或者使用简写方式：

{
    type: 'input',
    field: 'username',
    title: '用户名',
    $option: 'someValue'  // 使用自定义属性的简写形式
}

示例

自动设置组件的 options

监听组件value变化

监听自定义属性变化

下拉选择项联动

在某些业务场景中，表单的某些字段需要根据用户选择动态生成。例如，用户选择了某个国家后，需要根据国家显示不同的州或省份：

const countryEffect = {
    name: 'loadStates',
    components: '*',
    created({ value }, rule, fApi) {
        if (rule.field === 'country') {
            fApi.on('change', (value) => {
                // 根据国家加载州/省份数据
                const states = loadStatesForCountry(value);
                // 更新州/省份字段
                fApi.getRule('state').options = states;
            });
        }
    }
};


formCreate.register(countryEffect);


// 使用自定义属性的生成规则
{
    type: 'select',
    field: 'city',
    title: '城市',
    effect: {
        loadStates: true
    }
}

动态数据加载和更新

在复杂的业务场景中，某些表单字段可能依赖于外部数据源或其他字段的值。例如，一个下拉菜单的选项可能需要从远程 API 获取，且当用户在表单中选择不同的值时，相关的下拉选项会动态更新。

const dynamicOptionsEffect = {
    name: 'dynamicOptions',
    components: 'select',
    created({ value }, rule, fApi) {
        // 初始化时加载默认的选项
        if (!value) {
            this.loadOptions(rule, fApi);
        }
    },
    watch({ value }, rule, fApi) {
        // 当依赖的字段值发生变化时，重新加载选项
        if (value) {
            this.loadOptions(rule, fApi, value);
        }
    },
    async loadOptions(rule, fApi, dependentValue) {
        // 模拟从远程 API 获取数据
        const options = await fetchOptions(dependentValue);
        rule.options = options;
        fApi.sync(rule);  // 刷新表单，以反映新加载的选项
    }
};


formCreate.register(dynamicOptionsEffect);


// 使用自定义属性的生成规则
{
    type: 'select',
    field: 'city',
    title: '城市',
    effect: {
        dynamicOptions: 'country'
    }
}

表单字段的联动显示/隐藏

某些业务场景中，表单字段的显示或隐藏依赖于其他字段的值。通过自定义属性扩展，您可以实现这种动态联动的表单逻辑。

const toggleVisibilityEffect = {
    name: 'toggleVisibility',
    components: '*',
    value({ value }, rule, fApi) {
        // 当字段的值满足某个条件时，显示或隐藏另一个字段
        if (value === 'showDetails') {
            fApi.hidden('detailsField', false);  // 显示 detailsField 字段
        } else {
            fApi.hidden('detailsField', true);  // 隐藏 detailsField 字段
        }
    }
};


formCreate.register(toggleVisibilityEffect);


// 使用自定义属性的生成规则
const rules = [
    {
        type: 'radio',
        field: 'toggleField',
        title: '选择是否显示详情',
        options: [
            { label: '显示', value: 'showDetails' },
            { label: '隐藏', value: 'hideDetails' }
        ],
        effect: {
            toggleVisibility: true
        }
    },
    {
        type: 'input',
        field: 'detailsField',
        title: '详细信息',
        hidden: true  // 默认隐藏
    }
]

根据外部数据动态生成表单

在某些场景下，表单的内容可能是完全动态生成的，基于外部 API 的数据决定表单的结构和内容。通过自定义属性，您可以根据外部数据源动态生成或调整表单字段。

const generateFormEffect = {
    name: 'generateForm',
    components: '*',
    async created({ value }, rule, fApi) {
        // 模拟从远程 API 获取表单配置
        const formConfig = await fetchFormConfig(value);
        formConfig.fields.forEach(fieldConfig => {
            fApi.append(fieldConfig, rule.field);
        });
    }
};


formCreate.register(generateFormEffect);


// 使用自定义属性的生成规则
{
    type: 'input',
    field: 'templateSelector',
    title: '选择模板',
    effect: {
        generateForm: true
    }
}

通过自定义属性扩展，FormCreate 提供了灵活而强大的表单动态生成和控制能力。开发者可以根据具体的业务需求，定义各种自定义属性，实现复杂的表单逻辑、动态数据加载和联动效果。熟练掌握这些扩展功能，能够帮助开发者快速实现各种复杂的表单场景，大幅提升开发效率。