Skip to content

扩展自定义组件

生成一个容器组件,可以往内部拖入组件

定义组件

定义Col.Vue组件

vue
<template>
    <div class="col">
        <div>
            <slot></slot>
        </div>
        <span>slot是拖入组件的回显区域</span>
    </div>
</template>

导入并挂载自定义组件

js
//导入自定义组件
import Col from './Col.Vue';
import FcDesigner from '@form-create/designer';


//挂载自定义组件
FcDesigner.component('Col', Col);
//或者全局挂载
app.component('Col', Col);

定义组件的拖拽规则

js
const colRule = {
    //插入菜单位置
    menu: 'layout',
    //图标
    icon: 'icon-col',
    //名称
    label: '格子',
    //id,唯一!
    name: 'col',
    //可以向内部拖入组件
    drag: true,
    //组件操作按钮生成在组件的内部还是外部
    inside: true,
    //不显示遮罩,容器组件不能显示遮罩
    mask: false,
    //生成规则
    rule() {
        return {
            type: 'Col',
            props: {span: 12},
            children: []
        };
    },
    //属性配置规则
    props(_, {t}) {
        return [{
            type: 'slider',
            title: '宽度',
            field: 'span',
            value: 12,
            props: {min: 0, max: 24}
        }];
    }
};

挂载组件的拖拽规则

js
//挂载拖拽规则
this.$refs.designer.addComponent(colRule);