如何用ng-alain sf组件的开关按钮显示隐藏其他的组件

Question

           enabled: {
                type: 'boolean',
                title: '文字配置',
                ui: {
                    checkedChildren: '开',
                    unCheckedChildren: '关',
                },
            },

            calltitle_font: {
                type: "string",
                title: "1",
                default: { value: 2.5, color: null, checked: true },
                ui: {
                    spanLabel: 6,
                    spanControl: 14,
                    widget: "wrapper",
                    module: "font-styles",
                    grid: {
                        span: 12,
                    },
                },
            },

            call_font: {
                type: "string",
                title: "2",
                default: { value: 2.5, color: null, checked: true },
                ui: {
                    spanLabel: 6,
                    spanControl: 14,
                    widget: "wrapper",
                    module: "font-styles",
                    grid: {
                        span: 12,
                    },
                },
            },

比如点击开的时候显示下面的 1 2，点击关的时候隐藏起来

Answer 1

要实现这个功能，可以通过 ng-alain 的表单设计来实现。可以在开关按钮下面添加一个字段组，然后通过禁用该组件来实现隐藏。

具体的实现方式如下：

1. 在开关按钮的 enabled 字段下方，添加一个字段组，包含需要显示或隐藏的组件。

2. 在组件的 ui 配置中，通过添加 disabled 标记来控制组件的显示或隐藏，例如：

calltitle_font: {
    type: 'string',
    title: '1',
    ui: {
        spanLabel: 6,
        spanControl: 14,
        widget: 'wrapper',
        disabled: { watch: 'enabled', value: false }, // 根据 enabled 的值来禁用或启用组件
    },
},

1. 在 enabled 字段的 ui 配置中，添加一个 change 事件来切换其他组件的禁用状态，例如：

enabled: {
    type: 'boolean',
    title: '文字配置',
    ui: {
        checkedChildren: '开',
        unCheckedChildren: '关',
        change: (value, form, comp) => {
            // 获取需要禁用/启用的组件
            const calltitleFont = comp.formGroup.get('calltitle_font');
            const callFont = comp.formGroup.get('call_font');
            
            // 根据开关按钮的值来控制组件的禁用状态
            if (value) {
                calltitleFont.enable();
                callFont.enable();
            } else {
                calltitleFont.disable();
                callFont.disable();
            }
        },
        grid: {
            span: 12,
        },
    },
},

这样，在 ng-alain 的表单中，就可以通过开关按钮来实现显示或隐藏其他组件了。