2.0.3 • Published 10 months ago

lcdp-lib-form-designer

Licence

—

Version

2.0.3

Deps

Size

16.2 MB

Vulns

Weekly

Summary Dependency Versions

lcdp-lib-form-designer 可视化表单设计器

介绍

本项目使用 vue-cli 4 搭建，基于 vue 和 element-ui 实现。

可选参数

表单设计器（lcdp-lib-form-designer）入参：

参数名	参数类型	描述
preview	Boolean	是否为预览状态：true = 是；false（默认） = 否
generateCode	Boolean	是否输出表单代码：true = 是；false（默认） = 否
generateJson	Boolean	是否输出表单JSON结构数据：true = 是；false（默认） = 否
importJson	Boolean	是否允许导入JSON格式表单代码：true = 是；false（默认） = 否
clearable	Boolean	是否允许清空表单设计：true = 是（默认）；false = 否
variables	Object	引入变量：主要为当前登录用户信息
appId	String	应用ID
currentFormId	String	表单ID
currentFormVersionId	String	表单版本ID
systemConfig	Object	系统参数

使用示例:

1.安装:

    // 安装最新版本
    $ npm install -s lcdp-lib-form-designer
    // 安装指定版本
    $ npm install -s lcdp-lib-form-designer@version

2.引入:

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import lcdpLibFormDesigner from 'lcdp-lib-form-designer';
import './assets/styles/theme/element-variables.scss';
import 'remixicon/fonts/remixicon.css';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.use(ElementUI, {zIndex: 2000});
lcdpLibFormDesigner.install(Vue, {}, {});
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

3.使用:

<template>
  <lcdp-lib-form-designer
      clearable
      generate-code
      generate-json
      preview
      import-json>
  </lcdp-lib-form-designer>
</template>