MakingForm |
您所在的位置：网站首页 › 表单教程 › MakingForm |
|
MakingForm 表单设计器组件，通过可视化方式制作表单页面 代码演示 基础用法 vue注意 默认高度是根据父元素高度 100% 来渲染的，如果父级元素没有指定高度，可以为表单设计器指定具体的高度 自定义操作按钮 vue 保存 import { Upload } from '@element-plus/icons-vue' import { reactive } from 'vue' const actionButton = reactive({ clearable: true, preview: true }) 设计器左侧字段配置 vue 获取设计器配置 vue 获取配置 import { ref } from 'vue' import { ElMessageBox } from 'element-plus' const makingFormRef = ref() const handleJson = () => { const json = makingFormRef.value.getJSON() ElMessageBox.alert(json) } 导入表单配置 将设计好的表单配置 JSON Schema 导入到新的设计器中。 vue import { ref } from 'vue' const makingform = ref() const handleFormReady = () => { const newJson = { "list": [ { "type": "input", "icon": "icon-input", "options": { "width": "", "defaultValue": "", "required": false, "requiredMessage": "", "dataType": "", "dataTypeCheck": false, "dataTypeMessage": "", "pattern": "", "patternCheck": false, "patternMessage": "", "validatorCheck": false, "validator": "", "placeholder": "", "customClass": "", "disabled": false, "labelWidth": 100, "isLabelWidth": false, "hidden": false, "dataBind": true, "showPassword": false, "remoteFunc": "func_f7vuj1ic", "remoteOption": "option_f7vuj1ic" }, "events": { "onChange": "", "onFocus": "", "onBlur": "" }, "name": "Input", "key": "f7vuj1ic", "model": "input_f7vuj1ic", "rules": [] } ], "config": { "labelWidth": 100, "labelPosition": "right", "size": "default", "customClass": "", "ui": "element", "layout": "horizontal", "labelCol": 3, "width": "100%", "hideLabel": false, "hideErrorMessage": false, "eventScript": [ { "key": "mounted", "name": "mounted", "func": "" } ] } } makingform.value.setJSON(newJson) }注意 需要在设计器初始化完成后导入json，在 ready 事件中进行操作 初始化表单配置 vue const globalConfig = { // 为设计器配置默认样式表 styleSheets: '.a .el-form-item__label{color: red;}', // 数据源配置 dataSource: [ { key: 'getoptions', // 指定的唯一值 name: 'Get Options', // 数据源名称，唯一值 url: 'https://tools-server.making.link/api/new/options', // 请求接口地址 method: 'GET', auto: true, // 是否表单初始化时发送请求 responseFunc: 'return res.data', // 数据处理函数内容 headers: {}, // 数据请求头部，可选 params: {}, // 数据请求参数，可选，（查询参数） } ] }TIP 设计器初始化时会自动解析配置的样式表，取出一级类名，在 自定义Class 中进行配置。 表单字段默认配置 可以通过 field-config 对设计器中字段的默认属性进行配置。 vue const fieldConfig = [ { type: 'fileupload', options: { // 对上传组件地址进行配置 domain: 'https://tcdn.form.making.link/', action: 'https://tools-server.making.link/api/transfer', } }, { type: 'select', options: { // 对下拉框组件配置静态选项数据 options: [ {value: '1111'}, {value: '2222'}, {value: '3333'} ] } } ]更多字段可配置属性可以参考 字段可配置项。 字段标识下拉选择绑定 有时候我们在设计表单时，数据字段标识已经指定好，这时候可以通过field-models传入到设计器中，在设计的时候即可通过选择进行字段绑定。 vue const fieldModels = [ { fieldId: 'userId' }, { fieldId: 'userName', fieldLabel: '用户名' } ] 字段属性自定义扩展 在字段属性配置中，我们可以通过插槽引入自己的扩展配置。 vue这里我们通过widgetconfig插槽自由配置字段的属性，并且接收 type:(字段类型) data:(字段json数据) customProps:(字段自定义扩展的属性，用于绑定配置项) 参数。 API 属性 参数说明类型默认值preview预览操作booleanfalsegenerate-json生成json操作booleanfalsegenerate-code生成代码操作booleanfalseclearable清空操作booleanfalseupload导入json操作booleanfalsebasic-fields左侧基础字段配置，配置项见 字段说明-基础字段array-advance-fields左侧高级字段配置，配置项见 字段说明-高级字段array-layout-fields左侧布局字段配置，配置项见 字段说明-布局字段array-collection-fields左侧容器字段配置，配置项见 字段说明-容器字段array-custom-fields自定字段配置array-global-config表单初始化全局配置，配置项参考 Global Config Optionsobject-field-config表单字段默认配置项，配置项参考字段可配置项array-name设计器名称cache是否将json缓存到浏览器，可以通过配置name属性进行差异化存储booleanfalsejson-templates模板库配置； { title: '中文模板名称', enTitle: '英文模板名称', json: '模板json', url: '模板预览缩略图' }array[]init-from-template初始化时是否开启从模板库选择booleanfalsefield-models字段标识配置，为设计器字段标识提供下拉绑定。 { fieldId: 绑定字段标识, fieldLabel: 显示名称 }array[]panel ^3.3.2左侧面板默认展示类型： field : 组件库面板 outline : 大纲树面板stringfielduse-antd-form ^3.7.0是否开启Antd样式表单booleanfalse插槽 name说明action设计器头部操作按钮自定义区域widgetConfig ^3.4.0widgetconfig ^3.5.2字段属性自定义扩展区域，参见字段属性自定义扩展方法 方法名说明参数getJSON获取设计器配置的json数据-getHtml获取设计器生成的可以直接使用的代码-setJSON设置设计器配置的json数据（value) 设计器获取的json数据clear清空设计器操作-handleUndo撤销-handleRedo重做-setSelect设置设计器目前选中的组件(field) 字段标识getFormModels ^3.5.3获取表单字段结构列表 -generatePreviewQrcode ^3.5.5生成手机预览二维码 (url) 二维码地址事件 事件名说明回调参数ready设计器初始化完成-preview ^3.5.5表单预览(json) 表单JSON配置Global Config Options 参数说明类型默认值ui表单使用的UI组件库string (element | antd)elementwidth表单宽度string100%customClass自定义样式表类名string-styleSheets参见初始化表单配置string-dataSource参见初始化表单配置array-eventScript表单事件array-platform设备，可选 pc、pad、mobilestring- |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |