扩展模板
自定义模板可以帮助你快速创建常用的组件组合或布局，这在日常开发中尤为实用。通过定义自定义模板，你可以一次性拖拽出多个组件，简化开发流程。
数据结构
ts
//拖拽模板描述规则
export interface DragTemplateRule {
//固定
menu: 'template';
//模板的id,不能重复
name: string;
//模板的名称
label: string;
//是否只能拖入一个
only?: boolean;
//是否自动替换规则中的字段名, 表单中可能存在多个时建议为true
autoField?: false | boolean;
//表单全局配置, 拖入组件后会自动导入
formOptions?: {
//全局样式配置
globalClass?: GlobalClass;
//全局变量配置
globalVariable?: GlobalVariable;
//全局数据源配置
globalData?: GlobalData;
//全局事件配置
globalEvent?: GlobalEvent;
//多语言配置
language?: Object;
//全局样式
style?: string;
} | string;
//模板的渲染规则,或者json规则,或者通过函数返回json规则
template: Rule[] | string | ((arg: { t: t }) => string);
}定义模板的拖拽规则
在创建自定义模板时，需要定义一个规则对象，该对象包含了模板的基本信息和生成规则。以下示例演示了如何定义一个生成三列栅格的模板。
js
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: 包含组件生成规则的数组，用于定义模板中包含的组件和布局。
挂载拖拽规则
在定义了自定义模板后，需要将其挂载到设计器中，使其在设计器中可用。
js
// 假设这是你的 Vue 组件
export default {
mounted() {
// 挂载拖拽规则
this.$refs.designer.addComponent(ColTemplateRule);
}
};封装模板教程
教你封装一个支持城市搜索功能的 Select 下拉选择组件。
1. 设计规则
清空设计区域, 在设计区域新建一个 Select 组件，并为其添加城市搜索功能。
2. 获取规则
可通过右侧 JSON 面板或调用 designer.getJson() 方法获取组件配置规则。
通过designer.getJson()方法获取规则
vue
<template>
<fc-designer ref="designer"/>
</template>
<script setup>
const designer = ref(null);
//获取当前规则
function getRule(){
const json = designer.value.getJson();
console.log(json);
}
</script>3. 定义拖拽规则
新建 cityTemplate.js 文件，用于保存城市选择组件的拖拽配置规则。
ts
const CityTemplate = {
//插入菜单位置,固定为template
menu: 'template',
//id,唯一!
name: 'cityTemplate',
//模板名称
label: '城市',
//组件的生成规则,可以将设计器中设计好json规则放到此处
template: "[{\"type\":\"select\",\"field\":\"Fqqcm8cwgwq8afc\",\"title\":\"城市\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"props\":{\"remoteMethod\":\"$FNX:const key = $inject.args[0];\\n$inject.api.fetch({\\n\\taction: 'https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json?key=' + key,\\n}).then(res=>{\\n const options = []\\n res.rows.forEach((row)=>{\\n if(!key || row.name.indexOf(key) > -1){\\n options.push({label:row.name,value:row.name});\\n\\t\\t}\\n\\t})\\n $inject.self.options = options;\\n})\",\"filterable\":true,\"remote\":true,\"placeholder\":\"请选择城市\"},\"options\":[{\"label\":\"选项01\",\"value\":\"1\"},{\"label\":\"选项02\",\"value\":\"2\"},{\"label\":\"选项03\",\"value\":\"3\"}],\"_fc_id\":\"id_Fckbm8cwgwq8agc\",\"name\":\"ref_Fa3mm8cwgwq8ahc\",\"_fc_drag_tag\":\"select\",\"display\":true,\"hidden\":false}]"
}
export default CityTemplate;4. 导入拖拽规则
使用 addComponent 方法导入 cityTemplate.js 中定义的城市模板配置。
vue
<template>
<fc-designer ref="designer"/>
</template>
<script setup>
import {onMounted} from "vue";
const designer = ref(null);
//注意：需等待组件完成初始化后，方可调用其方法
onMounted(() => {
designer.value.addComponent(CityTemplate);
});
</script>更多示例
实例 1: 多组件组合
使用数字输入框输入数值，通过 value 组件自动转换为中文大写金额显示。
js
const chineseAmountTemplate = {
menu: 'template',
name: 'chineseAmount',
label: '中文金额',
template: [
{
type: 'inputNumber',
field: 'Fgtxlugfgbdvb5c',
title: '金额',
info: '',
$required: false,
display: true,
hidden: false,
_fc_drag_tag: 'inputNumber'
},
{
type: 'fcValue',
field: 'Fvr1lugfgd3yb7c',
title: ' ',
info: '',
display: true,
hidden: false,
_fc_drag_tag: 'fcValue',
style: {
color: '#999999'
},
computed: {
value: '"大写: " + TOCHINSESAMOUNT(Fgtxlugfgbdvb5c || 0)'
}
}
]
}实例 2: 单组件模板
将输入框封装为带单位显示的功能组件（如金额输入框显示"元"的后缀）。
js
const UnitTemplate = {
menu: 'template',
name: 'UnitTemplate',
label: '金额',
template: [
{
"type": "input",
"field": "Fpq4m8nxdq6fdbc",
"title": "金额",
"$required": false,
"_fc_id": "id_F3tam8nxdq6fdcc",
"name": "ref_Fywjm8nxdq6fddc",
"$easySlots": {
"suffix": {
"type": "text",
"value": "元"
}
},
"display": true,
"hidden": false,
"_fc_drag_tag": "input"
}
]
}实例 3: 关联全局配置
支持全局数据源和多语言的 Select 模板，自动加载选项并适配不同语言。
js
const StaffTemplate = {
menu: 'template',
name: 'StaffTemplate',
label: '人员',
formOptions: {
language: {
"zh-cn": {
"AMw2a0kE": "人员"
},
"en": {
"AMw2a0kE": "Staff"
}
},
globalData: {
"data_Ffa5m8nyi67vdnc": {
"label": "加载数据",
"type": "fetch",
"action": "/api/xxx",
"method": "GET",
"dataType": "json",
"headers": {},
"query": {},
"data": [],
"parse": "",
"onError": ""
}
},
},
template: [{
"type": "select",
"field": "Ffrsm8nyhvgsdkc",
"title": "{{$t.AMw2a0kE}}",
"effect": {
"fetch": {
"to": "options",
"key": "data_Ffa5m8nyi67vdnc",
"_uni": 1
}
},
"$required": false,
"props": {
"_optionType": 1
},
"_fc_id": "id_F2q2m8nyhvgsdlc",
"name": "ref_Frlsm8nyhvgsdmc",
"display": true,
"hidden": false,
"_fc_drag_tag": "select"
}]
}实例 3: 动态生成模板
假设你需要根据不同的业务场景生成不同的表单模板，可以通过配置对象来实现。
js
const FormTemplateRule = (config) => {
return {
menu: 'template',
name: 'form-template',
label: '动态表单模板',
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);
}
};自定义模板的应用场景
- 常用布局: 例如常用的栅格布局或表单布局，可以定义模板来快速拖拽出常见的布局组件。
- 业务组件: 封装业务逻辑组件，例如常用的卡片、列表等，可以通过自定义模板来实现快速插入。
- 复杂组件组合: 对于复杂的组件组合，例如嵌套的表单组件，可以通过自定义模板进行快速构建。
扩展自定义模板功能使得设计器更加灵活和强大。通过定义和挂载自定义模板，你可以快速生成常用的组件组合和布局。利用动态生成模板和配置对象，可以进一步提升模板的适用性和灵活性，满足不同业务场景的需求。