代码拉取完成,页面将自动刷新
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 ( φ(゜▽゜*)♪ )
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。