修改组件默认配置

在设计器中，您可以通过 updateDefaultRule 配置项设置组件的初始化规则。这允许您在拖拽组件到设计器时，自动应用某些默认配置，进而提高用户体验和效率。

数据结构

type UpdateDefaultRule = {
    //组件拖拽组件规则的id, 设置组件的初始化规则
    [id: string]: Partial<Omit<Rule, "field" | "children" | "component">> | ((Rule) => void);
}

修改输入框组件的默认规则

在这个示例中，让输入框拖入时自动禁用

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        updateDefaultRule: {
            input: {
                props: {
                    disabled: true
                }
            }
        }
    }
</script>

设置选择框的默认选项

您可以让选择框组件必填并且预设一个默认值，例如“请选择”：

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        updateDefaultRule: {
            select: {
                $required: true,
                props: {
                    options: [
                        { label: "请选择", value: "" },
                        { label: "选项1", value: "option1" },
                        { label: "选项2", value: "option2" }
                    ]
                }
            }
        }
    }
</script>

设置文本域的行数

您可以在文本域组件中设置默认的行数限制：

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        updateDefaultRule: {
            textarea: {
                props: {
                    rows: 5 // 默认行数
                }
            }
        }
    }
</script>