项目中集成variant form 表单设计器

1.安装

npm install vform-builds

2.min.js中全局引入

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 = false
 
Vue.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>