iss-library-form-designer
v4.0.0-dev-1
Published
ISS FETC LIBRARY: FORM DESIGNER BASE ON VUE.JS, MAKE FORM DEVELOPMENT SIMPLE AND EFFICIENT.
Downloads
1,037
Maintainers
Readme
iss-library-form-designer 可视化表单设计器
介绍
本项目使用 vue-cli 4
搭建,基于 vue
和 element-ui
实现。
可选参数
表单设计器(iss-library-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 [email protected]
2.引入:
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import issLibraryFormDesigner from 'iss-library-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});
issLibraryFormDesigner.install(Vue, {}, {});
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');
3.使用:
<template>
<iss-library-form-designer
clearable
generate-code
generate-json
preview
import-json>
</iss-library-form-designer>
</template>