# 自定义组件
# 字段说明
字段名 | 说明 | 类型 |
---|---|---|
name | 组件名称 | string |
rule | 获取组件生成规则的方法 | Function |
props | 获取组件配置规则的方法 | Function |
children | 子组件名称 | string |
drag | 是否可以拖入组件 | string | Boolean |
dragBtn | 是否显示拖拽按钮 | Boolean |
内置规则
组件配置规则(props
)中,如果field
以formCreate
开头会自定修改规则中对应的字段,例如:
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)
# 示例
定义 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
左侧表单组件下
- 拖拽规则插入到
FcDesigner
中 - 在
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>