0.1.0 • Published 2 years ago
e-form-design v0.1.0
表单设计器e-form-design
介绍
参考项目k-form-making,由于在项目中必须使用element-ui进行开发,因此封装了一套由VUE+element-ui实现的表单设计器,采用SCSS作为CSS预编译器语言,主要功能可以通过简单的拖拽操作,生成表单配置的JSON数据,通过配置数据可以将表单还原,让表单开发趋于低代码,更加简单快捷。
特性
- 可视化配置页面
- 提供栅格、表格等布局
- 布局嵌套使用
- 提供预览、保存、生成json、生成可执行代码等操作
- 支持表单验证
快速获取表单数据
EFormDesign 表单设计器(基于可视化操作快速设计出表单页面,生成配置json或页面)
- EFormBuild 表单构建器(根据设计器中获取的配置json数据,快速构建出表单页面)
安装
# 使用yarn
yarn add e-form-design
# 使用npm
npm i e-form-design --save
引入组件
// 在main.js引入
import EFormDesign from 'E-form-design'
import 'E-form-design/lib/E-form-design.css'
Vue.use(EFormDesign)
Vue.use(EFormDesign)
使用组件
<template>
<div>
<!-- 表单设计器 -->
<e-form-design :dynamicData="dynamicData"></e-form-design>
<!-- 样式显示 -->
<!-- <e-form-show :dynamicData="dynamicData" :data="data"></e-form-show> -->
</div>
</template>
<script>
export default {
data() {
return {
// 动态数据配置
dynamicData: {
// 动态选项
options: [
{
value: "1",
label: "选项a",
},
{
value: "2",
label: "选项b",
},
{
value: "3",
label: "选项c",
},
],
// 动态方法
dynamicFun: () => {
console.log(1234);
},
},
// 表单配置数据
data: {
list: [
{
type: "input",
label: "单行文本",
icon: "el-icon-edit",
model: "input_1644324741527_51403",
key: "1644324741527_51403",
options: {
type: "text",
width: "100%",
labelWidth: {
isOpen: false,
width: 100,
},
defaultValue: "",
placeholder: "请输入",
clearable: false,
hidden: false,
disabled: false,
},
rules: [
{
required: false,
message: "必填项",
},
{
userFlag: false,
type: "string",
message: "请输入字符串",
},
],
},
{
type: "textarea",
label: "多行文本",
icon: "el-icon-edit-outline",
model: "textarea_1644324745445_57222",
key: "1644324745445_57222",
options: {
labelWidth: {
isOpen: false,
width: 100,
},
width: "100%",
defaultValue: "",
placeholder: "请输入",
hidden: false,
disabled: false,
rows: 3,
},
rules: [
{
required: false,
message: "必填项",
},
{
userFlag: false,
type: "string",
message: "请输入字符串",
},
],
},
{
type: "select",
label: "下拉框",
icon: "el-icon-edit-outline",
model: "select_1644324748243_27667",
key: "1644324748243_27667",
options: {
labelWidth: {
isOpen: false,
width: 100,
},
width: "",
defaultValue: "",
hidden: false,
disabled: false,
clearable: false,
placeholder: "请选择",
options: [
{
value: "1",
label: "选项1",
},
{
value: "2",
label: "选项2",
},
{
value: "3",
label: "选项3",
},
],
dynamic: false,
dynamicKey: "",
filterable: false,
},
rules: [
{
required: false,
message: "必填项",
},
],
},
],
config: {
labelWidth: 100,
labelPosition: "right",
size: "small",
inline: false,
},
},
};
},
};
</script>
0.1.0
2 years ago