hi，朋友，您来啦。带上小板凳，我们一起瞅一瞅咱最新发布的表单设计。

renji-form-designer-vue 是一个基于VUE3实现的表单设计器。虽然，当前版本只包含了拖拽布局及相关代码，且所有组件均需要使用者自己实现，但是，这并不会难到我们。

安装

npm install renji-form-designer-vue --save

引用

在实际测试了几种拖拽库之后，最终采用了 dragula.js 。同时，采用了 bootstrap 的栅格系统。为了减少依赖与实际使用的相关问题，我们优化了相关代码，只为提高表单设计器的自定义能力。

<!-- 引用布局系统-->
<link href="/libs/bootstrap/5.x/css/bootstrap-grid.min.css" type="text/css" rel="stylesheet" />
<!-- 引用拖拽库  -->
<script type="module" src="/libs/dragula/3.7.3/dragula.min.js"></script>

全局注册组件

import RenJiFormDesigner from 'renji-form-designer-vue'
/** 导入样式 */
import 'renji-form-designer-vue/dist/style.css';
app.use(RenJiForm);

表单设计器组件的应用

1、自定义组件库

根据实际需求，设置用户可拖拽（可选择）的组件。

/**
 * 自定义组件库
 */
const componentLibrary = ref<ILib[]>([
    {name:'信息输入',child: [
        {id:1001,name:'单行输入框',icon: '',span: 6},
        {id:1002,name:'多行输入框',icon: '',span:6},
        {id:1003,name:'单选按钮组',icon: '',span: 6},
        {id:1004,name:'多选按钮组',icon: '',span: 6},
        {id:1004,name:'下拉选择器',icon: '',span: 6},
        {id:1005,name:'颜色选择器',icon: '',span: 6},
        {id:1006,name:'评分',      icon: '',span: 6},
        {id:1007,name:'滑动输入条',icon: '',span: 6},
        {id:1009,name:'输入组子表单',icon: '',span: 6, hideLabel: true},
        {id:1010,name:'表格子表单',icon: '',span: 6, hideLabel: true}
    ]},
    {name:'信息展示',child: [
        {id:6,name:'普通卡片',icon: '',span: 6, hideLabel: true},
    ]}
]);

2、设置自定义表单配置数据

const formDesignerData = ref({child:[]});
/**
 *  保存自定义表单的配置数据
 */
const eventChangeByFormDesigner = function(data: any){
    const jsonContent = JSON.stringify(data);
    message.success('保存成功！');
}

3、自定义配置区界面

你可以根据配置，完全自定义一个复杂的，或者很简单的配置界面。这一切没有任何限制，同时，配置区的组件和设计区的组件，它们是完全共用的。

问：配置区界面，可以通过拖拽后生成的配置来实现吗？

答：当然可以！

/**
 * 自定义表单【视图部分】的操作界面配置数据
 */
const formConfigData = ref<any>({
    label: {
        align: 'top'
    },
    style:{
        backgroundColor: '#ffffff',
        paddingBottom: '5rem'
    },
    child:[
        { id:1, name:'单行输入框', label: '视图名称', field: 'label.title', placeholder: '请填写视图名称', span: 12},
        { id:2, name:'颜色选择器', label: '背景色',   field: 'style.backgroundColor', span: 12,},
        { id:3, name: "单选按钮组", type: 'form', label:"标题对齐方式", span: 12, child:[], configs: [], field: 'label.align', viewType: 'button', options: [{value:'left',label:'居左'},{value:'right',label:'居右'},{value:'top',label:'整行'}], width: '85'},
    ]
});

/**
 *自定义表单【组件部分】的操作界面配置数据
 */
const componentConfigData = ref<any>({
    label: {
        align: 'top'
    },
    child:[
       { id:1, name:'单行输入框', label: '标题', field: 'label', placeholder: '请填写组件显示标题。'},
       { id:100001002, name: "单选按钮组", type: 'form', label:" ", span: 0, child:[], configs: [], field: 'hideLabel', viewType: 'button', options: [{value:true,label:'隐藏'}], width: '85'},
       { id:1, name:'单行输入框', label: '字段', field: 'field', placeholder: '请填写组件绑定字段。', span: 12},
       { id:100001007, name: "滑动输入条", type: 'form', label:"栅格", span: 12, child:[], configs: [], field: 'span',  min: 0, max: 12, watchs:[{field:'width',value:0}] },
       { id:100001008, name: "滑动输入条", type: 'form', label:"宽度", span: 12, child:[], configs: [], field: 'width', min: 0, max: 1000, watchs:[{field:'span',value:0}] },
       { id:100001009, name:'多行输入框', label: '空时显示', field: 'placeholder', placeholder: '', span: 12},
    //    { 
    //         id:100001011, name: "表格子表单", type: 'form', label:"选项", span: 12, configs: [], field: 'options', placeholder:'暂无选项！',  child: [
    //             { id:100001010001, name: "单行输入框", type: 'form', label:"标题", span: 0, child:[], configs: [], field: 'label'},
    //             { id:100001010002, name: "单行输入框", type: 'form', label:"数值", span: 0, child:[], configs: [], field: 'value'},
    //         ],  tableHideNumColumn: true, show: "name=='单选框'||name=='多选框'||name=='下拉选择'"
    //     },
        {
            id:100001011, name: "输入组子表单", type: 'form', label:"选项", span: 12, configs: [], field: 'options', placeholder:'暂无选项！',  child: [
                { id:100001010001, name: "单行输入框", type: 'form', label:"标题", span: 6, child:[], configs: [], field: 'label'},
                { id:100001010002, name: "单行输入框", type: 'form', label:"数值", span: 6, child:[], configs: [], field: 'value'},
            ]
            //, show: "name=='单选框'||name=='多选框'||name=='下拉选择'"
        },
        { id:100001014, name: "多行输入框", type: 'form', label:"根据条件隐藏", span: 0, child:[], configs: [], field: 'hide', width: 0, disabled: "hide=='true'" },
        { id:100001002, name: "单选按钮组", type: 'form', label:" ", span: 0, child:[], configs: [], field: 'hide', viewType: 'button', options: [{value:true,label:'隐藏'}], width: '85'},
    ]
});

表单预览组件的应用

创建一个普通组件（单行输入框）

<script setup lang="ts">
import {ref} from "vue";
const props = defineProps<{
  page:any             // 自定义表单的配置数据
  config?: any         // 当前组件的配置
  curData: any         // 绑定数据对象
  curField: string     // 绑定字段（属性）
  disabled: boolean    // 是否禁用
  hide: boolean        // 是否隐藏
}>();
</script>

<template>
    <a-input v-model:value="curData[curField]" :placeholder="config.placeholder||('请填写'+config.label)" :disabled="disabled" v-show="!hide" />
</template>

<style>
</style>

创建一个容器组件（可嵌套组件）

<script setup lang="ts">
import ComponentConfigInit from './service/ComponentConfigInit';
const props = defineProps<{
  page:any             // 自定义表单的配置数据
  config?: any         // 当前组件的配置
  curData: any         // 绑定数据对象
  curField: string     // 绑定字段（属性）
  disabled: boolean    // 是否禁用
  hide: boolean        // 是否隐藏
}>();

/** 克隆（创建）组件 */
const cloneComponent = (option:any) => {
    return ComponentConfigInit.cloneDog(option);
}
</script>

<template>
    <a-card :title="config.label">
        <renji-form-drag v-model="config.child" range="target-drag" :page="page" :config="config" :data="curData" :cloneComponent="cloneComponent"></renji-form-drag>
    </a-card>
</template>

<style scoped>
</style>

关注作者：关注有趣的表单设计器。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，让我们一起加油吧。