组件中获取设计器

在自定义组件中，可以通过 Vue 依赖注入机制获取设计器实例，从而实现对表单设计器的编程式访问和控制。

设计器实例的完整数据结构和可用方法请查阅帮助文档。

<template>
    <input type="text" v-model="title" @change="onChange">
</template>
<script>
    import {defineComponent} from 'vue';
    export default defineComponent({
        name: 'FieldInput',
        // 关键步骤：声明需要注入的设计器实例
        // Vue会自动从父组件中查找并提供designer实例
        inject: ['designer'],
        data() {
            return {
                title: ''
            }
        },
        computed: {
            activeRule() {
                return this.designer.setupState.activeRule;
                //return this.designer.activeRule; (vue2)
            }
        },
        methods: {
            onChange() {
                //直接修改当前选中的规则
                this.activeRule.title = this.title;
            }
        }
    });
</script>

通过掌握设计器实例的获取和使用，您将能够创建出功能强大的自定义组件，深度集成到表单设计器中。