代码拉取完成，页面将自动刷新
Vite + TypeScript + Vue3 + Element-plus制作的可视化表单生成器；
注意：项目中需先添加ElementPlus与ElementIcon的依赖
npm i vains-form-designer
import App from './App.vue';
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import * as ElIcons from "@element-plus/icons";
import VainsFormDesigner from 'vains-form-designer';
import 'element-plus/dist/index.css';
import 'vains-form-designer/dist/style.css';
const app = createApp(App);
// 加载图标
for (const icon in ElIcons) {
// @ts-ignore
app.component(icon, ElIcons[icon]);
}
app.use(ElementPlus);
app.use(VainsFormDesigner);
app.mount('#app');
<script setup lang="ts">
import { ref } from 'vue';
const formData = ref({});
</script>
<template>
<DesignerContainer :formData="formData" height="95vh" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const formData = ref({ Input_1637029608507: '1' })
const formItems = ref([
{
tag: 'el-input',
type: 'Input',
props: {
size: 'medium',
disabled: false,
readonly: false,
clearable: false,
suffixIcon: '',
prefixIcon: 'Avatar',
placeholder: '输入框',
},
label: '输入框',
modelValue: 'Input_1637029608507',
selectCurrent: false,
},
{
labelWidth: 100,
tag: 'el-button',
type: 'Button',
props: {
icon: '',
type: '',
size: 'medium',
plain: false,
round: false,
circle: false,
loading: false,
disabled: false,
},
label: '按钮',
buttonType: 'submit',
modelValue: '',
selectCurrent: true,
},
])
const formSettings = ref({
inline: false,
labelPosition: 'right',
labelWidth: 100,
labelSuffix: '',
statusIcon: false,
hideRequiredAsterisk: false,
showMessage: true,
size: 'medium',
disabled: false,
})
// 提交事件需添加提交类型的按钮方可触发(触发方式：@click)
const submit = () => {
console.log(123)
}
</script>
<template>
<Designer ref="designer" :formItems="formItems" :formData="formData" :formConfig="formSettings" @submit="submit" />
</template>
| 属性名 | 是否必填 | 说明 | 字段类型 | 默认值 |
|---|---|---|---|---|
| height | 否 | 编辑器高度 | string | 96.8vh(单位请使用vh或px，百分比的情况下会有问题) |
| formData | 否 | 表单双向绑定的json对象 | object | {} |
| formItems | 否 | 拖拽生成的表单组件列表 | Array | [] |
| 属性名 | 是否必填 | 说明 | 字段类型 | 默认值 |
|---|---|---|---|---|
| height | 否 | 编辑器高度 | string | 96.8vh(单位请使用vh或px，百分比的情况下会有问题) |
| formData | 是 | 表单双向绑定的json对象，复选和步进器要求有初始值 | object | {} |
| formConfig | 否 | 表单的配置，具体如下表所示 | object | 下表所示默认值 |
| formItems | 是 | 表单显示的列表 | Array | undefined |
| 属性名 | 说明 | 字段类型 | 默认值 |
|---|---|---|---|
| inline | 行内表单模式 | boolean | false |
| labelPosition | 表单域标签的位置， 如果值为 left 或者 right 时，则需要设置 label-width | string | 'right' |
| labelSuffix | 表单域标签的后缀 | string | '' |
| statusIcon | 是否在输入框中显示校验结果反馈图标 | boolean | false |
| hideRequiredAsterisk | 隐藏必填字段的标签旁边的红色星号 | boolean | false |
| showMessage | 是否显示校验错误信息 | boolean | true |
| size | 用于控制该表单内组件的尺寸 | string | 'medium' |
| disabled | 禁用 | boolean | false |
submit：提交事件，只有当添加了提交类型的按钮才会触发(触发方式：@click)
dynamicForm：表单实例，用于验证重置表单等，获取示例
<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue'
const formData = ref({ Input_1637029608507: '1' })
const formItems = ref([
{
tag: 'el-input',
type: 'Input',
props: {
size: 'medium',
disabled: false,
readonly: false,
clearable: false,
suffixIcon: '',
prefixIcon: 'Avatar',
placeholder: '输入框',
},
label: '输入框',
modelValue: 'Input_1637029608507',
selectCurrent: false,
},
{
labelWidth: 100,
tag: 'el-button',
type: 'Button',
props: {
icon: '',
type: '',
size: 'medium',
plain: false,
round: false,
circle: false,
loading: false,
disabled: false,
},
label: '按钮',
buttonType: 'submit',
modelValue: '',
selectCurrent: true,
},
])
const formSettings = ref({
inline: false,
labelPosition: 'right',
labelWidth: 100,
labelSuffix: '',
statusIcon: false,
hideRequiredAsterisk: false,
showMessage: true,
size: 'medium',
disabled: false,
})
// 提交事件需添加提交类型的按钮方可触发(触发方式：@click)
const submit = () => {
console.log(123)
}
const designer: Ref<HTMLElement | null> = ref<HTMLElement | null>(null)
onMounted(() => {
// 获取并打印表单的实例
// @ts-ignore
console.log(designer.value.dynamicForm)
})
</script>
<template>
<Designer ref="designer" :formItems="formItems" :formData="formData" :formConfig="formSettings" @submit="submit" />
</template>
getDynamicForm(): 获取表单实例对象 使用示例
<template>
<DesignerContainer ref="container" :formData="formData" :formItems="formItems" @submit="onSubmit" />
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const container = ref(null)
onMounted(() => {
// 调用方法获取表单实例对象
// @ts-ignore
console.log(container.value.getDynamicForm())
})
// 提交事件
const onSubmit = () => {
console.log(formData.value)
}
// 表单数据
const formData = ref({
Input_1637029608507: '',
})
// 表单列表
const formItems = ref([
{
labelWidth: 100,
tag: 'el-input',
type: 'Input',
props: {
size: 'medium',
disabled: false,
readonly: false,
clearable: false,
suffixIcon: '',
prefixIcon: '',
placeholder: '输入框',
},
label: '输入框',
modelValue: 'Input_1637029608507',
selectCurrent: false,
},
])
</script>
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
前段时间在学习Vue3+TypeScript，想着边学边写，这样学起来会快一些，本项目完全就是学习中的一个产出，所以有些代码比较乱，特别是末期加的Vuex，导致项目更乱了...TypeScript也逐渐演化成AnyScript了( (╯°Д°)╯︵ ┻━┻ )
本项目完全使用script setup的方式开发(这样开发起来很简单)
复选框、输入框、步进器、密码框、单选框、评分、滑块、开关、文本域、颜色选择器、日期时间选择器、下拉选择器、虚拟选择器、时间选择器、时间范围选择、时间下拉选择、按钮、布局容器
先从Gitee中拉取代码
1.拉取代码之后运行命令安装依赖
npm install
2.依赖安装完成之后可运行命令启动项目
npm run dev
3.完成之后访问 http://localhost:3000/vains-form-designer/ 查看效果
如果有什么问题或者好的建议请在评论区提出或提交issue
最后，如果觉得项目还不错，请点个star ( φ(゜▽゜*)♪ )
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
