lcdp-lib-form-renderer

1.8.0 • Public • Published

lcdp-lib-form-renderer 可视化表单设计器-渲染引擎

介绍

本项目使用 vue-cli 4 搭建,基于 vueelement-ui 实现。

可选参数

参数名 参数类型 描述
source Object 表单结构信息:JSON结构数据,存放表单及其组件的详细信息
value Object 表单录入值
edit Boolean 是否为编辑状态:true = 是;false(默认) = 否
printRead Boolean 是否为打印状态:true = 是;false(默认) = 否
preview Boolean 是否为预览状态:true = 是;false(默认) = 否
preferPlatform String 终端展示类型:’pc‘ = 电脑端(默认),’pad‘ = 平板电脑,’mobile‘ = 手机
lockPlatform Boolean 是否锁定终端类型:true = 是(默认);false = 否
variables Object 引入变量:主要为当前登录用户信息
currentFormId String 表单ID
formPublishVersionId String 表单发布ID

使用示例:

1.安装:

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

2.引入:

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import lcdpLibFormRenderner from 'lcdp-lib-form-renderer';
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});
lcdpLibFormRenderner.install(Vue, {}, {});
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

3.使用:

<template>
  <div>
    <lcdp-lib-form-renderer 
      :source="schema"
      :value="editData" 
      ref="formRenderer">
    </lcdp-lib-form-renderer>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      schema: {"list":[],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false,"theme":"default","themeTitle":"","themeSubTitle":"","themeTitleAlign":"left","submitHiddenArea":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"beforeSubmit","name":"beforeSubmit","func":"// 在表单提交前调用,且返回值会影响提交结果\n// 返回值为true时会继续执行 \n// 返回值为false时会阻止提交 \n// 返回值为Error时会阻止提交 且会修改错误提示信息 return new Error('提示信息'); \nreturn true;"},{"key":"submitted","name":"submitted","func":""}]},"version":1},
      editData: {}
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.formRenderer.getData().then(data => {
        // Data verification succeeded
        alert(JSON.stringify(data))
      }).catch(e => {
        // Data verification failed
      })
    }
  }
}
</script>

Package Sidebar

Install

npm i lcdp-lib-form-renderer

Weekly Downloads

4

Version

1.8.0

License

none

Unpacked Size

13.6 MB

Total Files

21

Last publish

Collaborators

  • algerkc
  • shenchuochuo