formcreat的应用2

之前介绍了使用formCreat通过json串渲染表单，今天来介绍一下他的一个相关产品FcDesigner

官网：https://pro.form-create.com/doc/

gitCode地址：https://gitcode.com/gh_mirrors/fo/form-create-designer/tree/next/packages/ant-design-vue

实现拖拽式构建表单的效果，有搭配不同种类的组件库可选

实现效果：

安装步骤

npm install @form-create/antd-designer@next npm install @form-create/ant-design-vue@next npm install ant-design-vue // 引入 import FcDesigner from '@form-create/antd-designer' import antd from 'ant-design-vue'; import 'ant-design-vue/dist/reset.css'; app.use(antd); app.use(FcDesigner) app.use(FcDesigner.formCreate)

基础搭建为上图的效果

<template> <div> <fc-designer ref="designer" height="100%" :config="config" @save="handleSave"/> </div> </template> <script setup> import { ref } from 'vue' const designer = ref() const lookJSONFn = ()=>{ console.log(designer.value.getRule()); } const config = ref({ showLanguage:false, showAi:false, showPreviewBtn:false, showSaveBtn:true, showComponentName:false, showEventForm:false, showControl:false, showJsonPreview:false, showCustomProps:false, // showFormConfig:false,//隐藏表单配置 fieldReadonly: false, permission:{ event:false, }, // 隐藏左侧的组件 // hiddenItem: ['switch', 'rate','radio','inputNumber','timeRange','timePicker','slider','dateRange','cascader', 'upload', 'transfer', 'tree', "aTransfer", "aTreeSelect", "fcEditor", 'editor', 'signaturePad'] }) function handleSave ({rule, options}) { console.log(rule, options); } </script> <style scoped> </style>

注意：这里使用的formCreat的版本和搭配的组件库要和渲染表单的组件库一致