Get Designer in Component

Get the designer instance in custom components using Vue's dependency injection mechanism, enabling programmatic access and control of the form designer. This lets you create custom components deeply integrated with the designer.

For the complete data structure and available methods of the designer instance, please refer to the Help Documentation.

Basic Usage

Inject Designer Instance

In custom components, declare the designer instance to be injected through the inject option:

<template>
    <input type="text" v-model="title" @change="onChange">
</template>
<script>
    import {defineComponent} from 'vue';
    export default defineComponent({
        name: 'FieldInput',
        // Key step: declare the designer instance to be injected
        // Vue will automatically find and provide the designer instance from parent components
        inject: ['designer'],
        data() {
            return {
                title: ''
            }
        },
        computed: {
            activeRule() {
                return this.designer.setupState.activeRule;
                //return this.designer.activeRule; (vue2)
            }
        },
        methods: {
            onChange() {
                // Directly modify the currently selected rule
                this.activeRule.title = this.title;
            }
        }
    });
</script>

Designer Instance Structure

Main Properties

The designer instance provides rich properties and methods, mainly including:

• setupState: Designer's reactive state
  • activeRule: Currently selected rule object
  • t: Internationalization translation function
  • formOptions: Form configuration options
  • dragForm: Drag form instance

Access Current Rule

<script>
export default defineComponent({
    inject: ['designer'],
    computed: {
        // Get currently selected rule
        activeRule() {
            return this.designer.setupState.activeRule;
        },
        // Get form configuration
        formOptions() {
            return this.designer.setupState.formOptions;
        },
        // Get translation function
        t() {
            return this.designer.setupState.t;
        }
    }
});
</script>

Practical Application Examples

1. Style Configuration Component

Reference the implementation of the CssInput.vue component to demonstrate how to create style configuration functionality:

<template>
    <div class="css-input">
        <el-badge type="warning" is-dot :hidden="!configured">
            <div class="css-btn" @click="visible = true">
                <i class="fc-icon icon-stack"></i>
                Cascading Style
            </div>
        </el-badge>
        <el-dialog v-model="visible" title="Cascading Style Configuration">
            <StyleEditor v-model="cssValue" />
            <template #footer>
                <el-button @click="visible = false">Cancel</el-button>
                <el-button type="primary" @click="onOk">Confirm</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default defineComponent({
    name: 'CssInput',
    inject: ['designer'],
    computed: {
        activeRule() {
            return this.designer.setupState.activeRule;
        },
        configured() {
            return !is.empty(this.activeRule?.$css);
        }
    },
    data() {
        return {
            visible: false,
            cssValue: ''
        };
    },
    methods: {
        onOk() {
            // Directly modify the current rule's style
            this.activeRule.$css = this.cssValue.trim();
            this.visible = false;
        }
    }
});
</script>

2. Rule Property Editor

Create a component for editing rule properties:

<template>
    <div class="rule-editor">
        <el-form :model="formData" label-width="80px">
            <el-form-item label="Field Name">
                <el-input v-model="formData.field" @change="updateRule" />
            </el-form-item>
            <el-form-item label="Title">
                <el-input v-model="formData.title" @change="updateRule" />
            </el-form-item>
            <el-form-item label="Required">
                <el-switch v-model="formData.required" @change="updateRule" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default defineComponent({
    name: 'RuleEditor',
    inject: ['designer'],
    computed: {
        activeRule() {
            return this.designer.setupState.activeRule;
        }
    },
    data() {
        return {
            formData: {
                field: '',
                title: '',
                required: false
            }
        };
    },
    watch: {
        activeRule: {
            handler(rule) {
                if (rule) {
                    this.formData = {
                        field: rule.field || '',
                        title: rule.title || '',
                        required: rule.$required || false
                    };
                }
            },
            immediate: true
        }
    },
    methods: {
        updateRule() {
            if (this.activeRule) {
                // Update rule properties
                this.activeRule.field = this.formData.field;
                this.activeRule.title = this.formData.title;
                this.activeRule.$required = this.formData.required;
            }
        }
    }
});
</script>

3. Form Configuration Component

Create a component for configuring form global options:

<template>
    <div class="form-config">
        <el-form :model="config" label-width="100px">
            <el-form-item label="Label Position">
                <el-select v-model="config.labelPosition" @change="updateFormOptions">
                    <el-option label="Right Aligned" value="right" />
                    <el-option label="Left Aligned" value="left" />
                    <el-option label="Top Aligned" value="top" />
                </el-select>
            </el-form-item>
            <el-form-item label="Form Size">
                <el-select v-model="config.size" @change="updateFormOptions">
                    <el-option label="Large" value="large" />
                    <el-option label="Default" value="default" />
                    <el-option label="Small" value="small" />
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default defineComponent({
    name: 'FormConfig',
    inject: ['designer'],
    computed: {
        formOptions() {
            return this.designer.setupState.formOptions;
        }
    },
    data() {
        return {
            config: {
                labelPosition: 'right',
                size: 'default'
            }
        };
    },
    watch: {
        formOptions: {
            handler(options) {
                if (options.form) {
                    this.config = {
                        labelPosition: options.form.labelPosition || 'right',
                        size: options.form.size || 'default'
                    };
                }
            },
            immediate: true
        }
    },
    methods: {
        updateFormOptions() {
            // Update form configuration
            this.designer.setupState.formOptions.form = {
                ...this.designer.setupState.formOptions.form,
                ...this.config
            };
        }
    }
});
</script>

Notes

1. Vue Version Compatibility:

   • Vue 3: Use this.designer.setupState.activeRule
   • Vue 2: Use this.designer.activeRule

2. Reactive Updates: The designer instance is reactive. Modifying properties of activeRule will automatically update the designer interface

3. Lifecycle: Ensure you access the designer instance after the component is mounted to avoid getting undefined

4. Error Handling: Before accessing designer properties, it's recommended to check if the instance exists

<script>
export default defineComponent({
    inject: ['designer'],
    computed: {
        activeRule() {
            return this.designer?.setupState?.activeRule;
        }
    },
    methods: {
        safeUpdateRule() {
            if (this.activeRule) {
                this.activeRule.title = 'New Title';
            }
        }
    }
});
</script>

By mastering the acquisition and use of the designer instance, you will be able to create powerful custom components deeply integrated into the form designer, providing users with a richer interactive experience.