Skip to content

扩展自定义操作

在设计器中面板中增加自定义按钮,扩展业务逻辑

保存表单

通过定义props.config.showSaveBtn字段,显示保存按钮.点击保存按钮后触发save事件

vue
<template>
    <fc-designer ref="designer" @save="handleSave" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                config: {
                    showSaveBtn: true
                },
            };
        },
        methods: {
            handleSave() {
                // todo
            }
        }
    };
</script>

配置扩展

通过props.handle扩展操作按钮

vue
<template>
    <fc-designer ref="designer" :handle="handle"></fc-designer>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                handle: [
                    {
                        label:'中英切换',
                        handle:()=>{
                           //todo
                        },
                    },
                    {
                        label:'选择表单',
                        handle:()=>{
                            //todo
                        },
                    },
                ],
            };
        }
    };
</script>

插槽扩展

通过handle插槽扩展自定义按钮

vue
<template>
    <fc-designer ref="designer">
        <template #handle>
            <ElButton>自定义按钮</ElButton>
        </template>
    </fc-designer>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {};
        }
    };
</script>