vue集成Variant Form表单设计器

1.安装

npm install vform-builds

2.引入并全局注册VForm组件

import Vue from 'vue'
import App from './App.vue'import ElementUI from 'element-ui'  //引入element-ui库
import VForm from 'vform-builds'  //引入VForm库import 'element-ui/lib/theme-chalk/index.css'  //引入element-ui样式
import 'vform-builds/dist/VFormDesigner.css'  //引入VForm样式Vue.config.productionTip = falseVue.use(ElementUI)  //全局注册element-ui
Vue.use(VForm)  //全局注册VForm(同时注册了v-form-designer和v-form-render组件)new Vue({render: h => h(App),
}).$mount('#app')

3.表单设计器使用

<template><div><v-form-designer ref="vfDesigner" :designer-config="designerConfig"><template #customToolButtons><el-button @click="save" type="text"  icon="el-icon-plus">保存</el-button></template></v-form-designer></div>
</template><script>export default {data() {return {designerConfig: {// 是否显示语言切换菜单languageMenu: false,// 是否显示GitHub、文档等外部链接externalLink: false,// 是否显示表单模板formTemplates: true,// 是否禁止修改唯一名称widgetNameReadonly: false,// 是否显示组件事件属性折叠面板eventCollapse: true,// 是否显示清空设计器按钮clearDesignerButton: true,// 是否显示预览表单按钮previewFormButton: true,// 是否显示导入JSON按钮importJsonButton: false,// 是否显示导出JSON器按钮exportJsonButton: false,// 是否显示导出代码按钮exportCodeButton: false,// 是否显示生成SFC按钮generateSFCButton: false,// 工具按钮栏最大宽度（单位px）toolbarMaxWidth: 180,// 工具栏按钮最小宽度（单位px）toolbarMinWidth: 180,// 表单设计器预设CSS代码presetCssCode: '',},}},mounted() {var jsonStr = "{\"widgetList\":[{\"type\":\"input\",\"icon\":\"text-field\",\"formItemFlag\":true,\"options\":{\"name\":\"name\",\"label\":\"姓名\",\"labelAlign\":\"\",\"type\":\"text\",\"defaultValue\":\"\",\"placeholder\":\"\",\"columnWidth\":\"200px\",\"size\":\"\",\"labelWidth\":null,\"labelHidden\":false,\"readonly\":false,\"disabled\":false,\"hidden\":false,\"clearable\":true,\"showPassword\":false,\"required\":false,\"requiredHint\":\"\",\"validation\":\"\",\"validationHint\":\"\",\"customClass\":\"\",\"labelIconClass\":null,\"labelIconPosition\":\"rear\",\"labelTooltip\":null,\"minLength\":null,\"maxLength\":null,\"showWordLimit\":false,\"prefixIcon\":\"\",\"suffixIcon\":\"\",\"appendButton\":false,\"appendButtonDisabled\":false,\"buttonIcon\":\"el-icon-search\",\"onCreated\":\"\",\"onMounted\":\"\",\"onInput\":\"\",\"onChange\":\"\",\"onFocus\":\"\",\"onBlur\":\"\",\"onValidate\":\"\",\"onAppendButtonClick\":\"\"},\"id\":\"input90030\"},{\"type\":\"radio\",\"icon\":\"radio-field\",\"formItemFlag\":true,\"options\":{\"name\":\"sex\",\"label\":\"性别\",\"labelAlign\":\"\",\"defaultValue\":2,\"columnWidth\":\"200px\",\"size\":\"\",\"displayStyle\":\"inline\",\"buttonStyle\":false,\"border\":false,\"labelWidth\":null,\"labelHidden\":false,\"disabled\":false,\"hidden\":false,\"optionItems\":[{\"label\":\"男\",\"value\":1},{\"label\":\"女\",\"value\":2}],\"required\":false,\"requiredHint\":\"\",\"validation\":\"\",\"validationHint\":\"\",\"customClass\":\"\",\"labelIconClass\":null,\"labelIconPosition\":\"rear\",\"labelTooltip\":\"\",\"onCreated\":\"\",\"onMounted\":\"\",\"onChange\":\"\",\"onValidate\":\"\"},\"id\":\"radio100459\"}],\"formConfig\":{\"modelName\":\"formData\",\"refName\":\"vForm\",\"rulesName\":\"rules\",\"labelWidth\":80,\"labelPosition\":\"left\",\"size\":\"\",\"labelAlign\":\"label-left-align\",\"cssCode\":\"\",\"customClass\":\"\",\"functions\":\"\",\"layoutType\":\"PC\",\"onFormCreated\":\"\",\"onFormMounted\":\"\",\"onFormDataChange\":\"\"}}";this.$refs.vfDesigner.setFormJson(JSON.parse(jsonStr))},beforeDestroy() {this.$refs.vfDesigner.clearDesigner()},methods: {async save() {const jsonStr = JSON.stringify(this.$refs.vfDesigner.getFormJson());console.log(jsonStr);alert(jsonStr);}},}
</script><style lang="scss" scoped>body {margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */}#app .app-main{.main-container{margin-left:0px;}}/* 隐藏head头部 */::v-deep .main-header {display: none !important;}/* 隐藏pc mobile按钮组 */::v-deep .left-toolbar .el-button-group {display: none;}/* 隐藏组件层次结构树 */::v-deep .left-toolbar [title='组件层次结构树'] {display: none;}</style>

效果:

vue集成Variant Form表单设计器相关推荐

基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
Vue+Element-UI 使用 Vform 表单设计器
1.表单设计器基础字段建议 //主键id Int id (guid id) //表单数据 String FormJson //表单名称 String FormName //表单描述 String F ...
基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介参考项目 ...
vue自定义表单设计器思路
Vue是一种流行的JavaScript框架,用于构建Web应用程序.Vue的灵活性使得它成为一种非常适合创建自定义表单设计器的框架.本文将介绍如何使用Vue实现一个自定义表单设计器,并最终实现单据自定 ...
flowable表单设计器选型
用flowable实现工作流不可避免有表单的需求,讲一下flowable表单设计器的选择. flowable有自带的表单设计器,这个结合业务需求看是否合适. 网上也有很多开源的设计器,如果用开源的表单 ...
基于springboot+element ui+vue的java快速开发平台，集成html5工作流设计器，flowable， element ui 表单设计器
前后端分离.maven多模块开发,方便多人协同开发后端选型:springboot2 + mybatis + shiro + jwt token + flowable 前端选型:vue + eleme ...
activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址: http://tools.xiaoyaoji.cn/form Gi ...
Antd Vue 表单生成快速开发指南，内附强大的表单设计器
之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...
基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址:http://form.making.link GitHub地址:h ...

vue集成Variant Form表单设计器

vue集成Variant Form表单设计器相关推荐

最新文章

热门文章