# 自定义组件

# 字段说明

字段名 说明 类型
name 组件名称 string
rule 获取组件生成规则的方法 Function
props 获取组件配置规则的方法 Function
children 子组件名称 string
drag 是否可以拖入组件 string | Boolean
dragBtn 是否显示拖拽按钮 Boolean

内置规则

组件配置规则(props)中,如果fieldformCreate开头会自定修改规则中对应的字段,例如:

  • formCreateOptions 修改当前规则的 rule.options
  • formCreateProps 修改当前规则的 rule.props
  • formCreate{field} 修改当前规则的 rule[{field}]
  • formCreateProps>data 修改当前规则的 rule.props.data
  • formCreateProps>${field} 修改当前规则的 rule.props[${field}]
  • formCreateEffect>${field} 修改当前规则的 rule.effect[${field}]
  • formCreateChild 修改当前规则的 rule.children[0]

rule 的详细规则具体请阅读 form-create文档 (opens new window)

更多自定义组件规则 (opens new window)

# 示例

定义 checkbox 组件的拖拽规则

import FcDesigner from '@form-create/designer';

const label = ' 自定义多选框';
const name = 'checkbox';
let i = 1;
const uniqueId = ()=>`uni${i++}`;

const checkbox = {
    //拖拽组件的图标
    icon: 'icon-checkbox',
    //拖拽组件的名称
    label,
    //拖拽组件的 key
    name,
    //拖拽组件的生成规则
    rule() {
        //如果在 props 方法中需要修改 rule 的属性,需要提前在 rule 上定义对应的属性
        return {
            //生成组件的名称
            type: name,
            //field 自定不能重复,所以这里每次都会生成一个新的
            field: uniqueId(),
            title: label,
            info: '',
            effect: {
                fetch: ''
            },
            //这里设置组件的默认props配置项, 在下面的 props 方法里面设置无效
            props: {},
            options: [
                {value: '1', label: '选项1'},
                {value: '2', label: '选项2'},
            ]
        };
    },
    //拖拽组件配置项(props)的生成规则
    props() {
        return [
            //生成`checkbox`组件的`options`配置规则
            FcDesigner.makeOptionsRule('options'),
            {
                type: 'switch',
                field: 'type',
                title: '按钮类型',
                props: {activeValue: 'button', inactiveValue: 'default'}
            }, {type: 'switch', field: 'disabled', title: '是否禁用'}, {
                type: 'inputNumber',
                field: 'min',
                title: '可被勾选的 checkbox 的最小数量'
            }, {type: 'inputNumber', field: 'max', title: '可被勾选的 checkbox 的最大数量'}, {
                type: 'input',
                field: 'textColor',
                title: '按钮形式的 Checkbox 激活时的文本颜色'
            }, {type: 'input', field: 'fill', title: '按钮形式的 Checkbox 激活时的填充色和边框色'}];
    }
};

将自定义拖拽规则插入到FcDesigner左侧表单组件下

  1. 拖拽规则插入到FcDesigner
  2. FcDesigner左侧添加组件按钮
<template>
  <fc-designer ref="designer"/>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {};
    },
    created(){
      //插入组件规则
      this.$refs.designer.addComponent(checkbox);
      //插入拖拽按钮到`main`分类下
      this.$refs.designer.appendMenuItem('main', {
        icon: checkbox.icon,
        name: checkbox.name,
        label: checkbox.label
      })
    }
};
</script>