表单引擎服务于 高校新平台 --- 针对 vue-next

版本相关问题---对于vue-next基于vuecli不同的版本对于模板编译有所不同

"dependencies": {
  "axios": "^0.21.1",
  "codemirror": "^5.62.2",
  "core-js": "^3.8.3",
  "element-plus": "^1.0.2-beta.33",
  "vue": "3.1.4",
  "vue-i18n": "^9.1.7",
  "vuedraggable": "^4.0.3"
}
"devDependencies": {
  "@vue/cli-plugin-babel": "~5.0.0-beta.2",
  "@vue/cli-plugin-eslint": "~5.0.0-beta.2",
  "@vue/cli-service": "~5.0.0-beta.2"
}

插件安装

npm i form-engine-vue3 --save
# yarn
yarn add form-engine-vue3

插件使用

引入

import FormEngineVue3 from 'form-engine-vue3'

或者 import {FormEngine, FormPreview} from 'form-engine-vue3'

安装插件

import { createApp } from 'vue'

const app = createApp(App)
app.use(FormEngine)

使用

<!-- 表单引擎的编辑 -->
<form-engine :evaluationId="41" :data='data' :stepId="50" :config="{
    getComs,
    getEvaluation,
    uploadImg
  }"></form-engine>

<!-- 表单引擎的预览 -->
<generate-form :data="data"></generate-form>

• 参数说明

// form-engine 组件
const evaluationId?: string | number // 业务需要
interface EngineConfig {
  labelPosition: 'left' | 'right' | 'top'; // 标签的对去方式
  labelWidth: number; // 表单标签的宽度
  size: 'medium' | 'small' | 'mini'; //
}
/* 下面三个控件对应的类型不一一赘述 */
interface BaseComponent{}  // 基础包括单行文本等
interface AdvanceComponents{} // 图片控件
interface LayoutComponents{} // grid控件
interface EngineData {
  config: EngineConfig,
  list: Array<BaseComponent|AdvanceComponents|LayoutComponents>
}
const data: EngineData;
const stepId?: number; // 业务需要
const config?: Object; // 传入的内置方法

// generate-form 组件
const data: EngineData;

相关插件名字

form-engine generate-form