扩展自定义模板

自定义模板可以帮助你快速创建常用的组件组合或布局，这在日常开发中尤为实用。通过定义自定义模板，你可以一次性拖拽出多个组件，简化开发流程。

定义模板的拖拽规则

在创建自定义模板时，需要定义一个规则对象，该对象包含了模板的基本信息和生成规则。以下示例演示了如何定义一个生成三列栅格的模板。

const ColTemplateRule = {
    //插入菜单位置,固定为template
    menu: 'template',
    //id,唯一!
    name: 'col3',
    //模板名称
    label: '三列栅格',
    //是否自动替换规则中的字段名，表单中可能存在多个时建议为true，只支持自动生成的字段ID!
    autoField: false,
    //是否只能拖入一个
    only: false,
    //组件的生成规则,可以将设计器中设计好json规则放到此处
    template: [
        {
            type: 'fcRow',
            children: [
                {
                    type: 'col',
                    props: {
                        span: 8
                    },
                    display: true,
                    hidden: false,
                    _fc_drag_tag: 'col'
                },
                {
                    type: 'col',
                    props: {
                        span: 8
                    },
                    display: true,
                    hidden: false,
                    _fc_drag_tag: 'col'
                },
                {
                    type: 'col',
                    props: {
                        span: 8
                    },
                    display: true,
                    hidden: false,
                    _fc_drag_tag: 'col'
                }
            ],
            display: true,
            hidden: false,
            _fc_drag_tag: 'fcRow'
        }
    ]
};

说明

• menu: template 表示模板将出现在模板菜单中。
• name: col3 唯一标识符，用于在系统中识别该模板。
• label: 三列栅格 模板的显示名称。
• autoField: false 表示在模板中不会自动替换字段名。
• only: false 表示可以拖拽多个实例。
• template: 包含组件生成规则的数组，用于定义模板中包含的组件和布局。

挂载拖拽规则

在定义了自定义模板后，需要将其挂载到设计器中，使其在设计器中可用。

// 假设这是你的 Vue 组件
export default {
    mounted() {
        // 挂载拖拽规则
        this.$refs.designer.addComponent(ColTemplateRule);
    }
};

动态生成模板内容

在实际开发中，有时需要根据不同的条件动态生成模板内容。可以通过在模板规则中使用 JavaScript 函数来实现动态内容生成。以下示例演示了如何在模板中动态设置组件属性。

示例：动态生成栅格内容

假设我们希望根据传入的配置动态生成不同数量的列，可以通过在模板规则中使用函数来实现。

const DynamicColTemplateRule = (columns) => {
    const columnsArray = [];
    for (let i = 0; i < columns; i++) {
        columnsArray.push({
            type: 'col',
            props: {
                span: 24 / columns // 每列占据总栅格的等分
            },
            display: true,
            hidden: false,
            _fc_drag_tag: 'col'
        });
    }


return {
        // 插入菜单位置，固定为 'template'
        menu: 'template',
        // 模板 ID，唯一!
        name: `dynamic-col-${columns}`,
        // 模板名称
        label: `动态栅格(${columns}列)`,
        // 是否自动替换规则中的字段名
        autoField: false,
        // 是否只能拖入一个
        only: false,
        // 组件的生成规则
        template: [
            {
                type: 'fcRow',
                children: columnsArray,
                display: true,
                hidden: false,
                _fc_drag_tag: 'fcRow'
            }
        ]
    };
};

示例：挂载动态模板

// 假设这是你的 Vue 组件
export default {
  mounted() {
    // 按需生成模板规则并挂载
    const col4Template = DynamicColTemplateRule(4);
    const col6Template = DynamicColTemplateRule(6);


this.$refs.designer.addComponent(col4Template);
    this.$refs.designer.addComponent(col6Template);
  }
};

自定义模板与模板配置

自定义模板不仅可以用于简单的布局，还可以结合配置进行高级用法。例如，可以通过传入不同的配置参数，动态生成不同的组件或布局。

示例：结合配置生成模板

假设你需要根据不同的业务场景生成不同的表单模板，可以通过配置对象来实现。

const FormTemplateRule = (config) => {
    return {
        menu: 'template',
        name: 'form-template',
        label: '动态表单模板',
        autoField: true,
        only: false,
        template: [
            {
                type: 'fcRow',
                children: config.fields.map(field => ({
                    type: field.type,
                    props: field.props,
                    display: true,
                    hidden: false,
                    _fc_drag_tag: field.type
                })),
                display: true,
                hidden: false,
                _fc_drag_tag: 'fcRow'
            }
        ]
    };
};


// 配置对象示例
const formConfig = {
    fields: [
        { type: 'input', props: { placeholder: '请输入名称' } },
        { type: 'select', props: { options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }] } }
    ]
};


// 挂载模板
export default {
  mounted() {
    const formTemplate = FormTemplateRule(formConfig);
    this.$refs.designer.addComponent(formTemplate);
  }
};

自定义模板的应用场景

• 常用布局: 例如常用的栅格布局或表单布局，可以定义模板来快速拖拽出常见的布局组件。
• 业务组件: 封装业务逻辑组件，例如常用的卡片、列表等，可以通过自定义模板来实现快速插入。
• 复杂组件组合: 对于复杂的组件组合，例如嵌套的表单组件，可以通过自定义模板进行快速构建。

扩展自定义模板功能使得设计器更加灵活和强大。通过定义和挂载自定义模板，你可以快速生成常用的组件组合和布局。利用动态生成模板和配置对象，可以进一步提升模板的适用性和灵活性，满足不同业务场景的需求。