动态表单设计器

v-formdesigner 是基于 ElementUI + vue3-smooth-dnd 实现的表单设计器组件，可以通过拖拽方式快速创建表单

开始

安装

1# 安装表单设计器
2pnpm add @klaus_v_reinherz/v-formdesigner

修改 mian.ts

1import { createApp } from 'vue'
2import './style.css'
3import App from './App.vue'
4import ElementPlus from 'element-plus' //请自行导入ElementPlus并挂载
5import zhCn from 'element-plus/es/locale/lang/zh-cn'
6import 'element-plus/dist/index.css'
7import '@klaus_v_reinherz/v-formdesigner/dist/style.css' //引入所需样式
8
9const app = createApp(App)
10app.use(ElementPlus, {
11  locale: zhCn,
12})
13app.mount('#app')

vite-env.d.ts 文件中添加声明模块

1/// <reference types="vite/client" />
2declare module '@klaus_v_reinherz/v-formdesigner'

App.vue 中引入

1<script setup lang="ts">
2import { FormDesigner } from '@klaus_v_reinherz/v-formdesigner'
3</script>
4
5<template>
6  <form-designer />
7</template>
8
9<style scoped></style>

---

FormDesigner 表单设计器

表单设计器包含保存方法，并且会走接口保存，保存成功后有 success 回调

1<script setup lang="ts">
2import { ref } from 'vue'
3import { FormDesigner } from '@klaus_v_reinherz/v-formdesigner'
4
5let designeRef = ref<any>(null) //表单设计器组件
6
7// 获取模板详情
8function getDetail() {
9  designeRef.value.getTemplateDetail({ id: 3 })
10}
11
12function handleSuccess() {
13  console.log('保存成功')
14}
15</script>
16
17<template>
18  <el-button @click="getDetail">获取详情</el-button>
19  <form-designer ref="designeRef" @success="handleSuccess" />
20</template>
21
22<style scoped></style>

Attributes

名称	类型	说明
success	Function	保存成功后的回调

Exposes

名称	类型	入参	说明
getTemplateDetail	Function	{id:1}	传递 object 对象，之后保存将处于编辑

---

FromCreate 表单

表单组件渲染需要传递模版 id，渲染表单内容需要传递表单 id

1<script setup lang="ts">
2import { ref } from 'vue'
3import { FormCreate } from '@klaus_v_reinherz/v-formdesigner'
4
5interface RuleFormData {
6  [key: string]: any
7}
8let formRef = ref<any>(null) //表单组件
9
10// 获取表单模板
11function setFormTemplate() {
12  formRef.value.getTemplateDetail({ id: 1 }) //id：模板id
13}
14  
15// 设置表单数据
16function setFormData() {
17  formRef.value.getFormDetail({ id: 1 }) //id：表单id
18}
19  
20// 校验
21function handleSubmit() {
22  formRef.value.validate()
23}
24  
25// 后续业务处理，目前是组件内部走接口解决这个事情
26function handleSuccess(form: RuleFormData) {
27  console.log('保存成功，表单数据为：', form)
28}
29</script>
30
31<template>
32  <el-button @click="setFormTemplate">渲染表单</el-button>
33  <el-button @click="setFormData">编辑表单内容</el-button>
34  <form-create ref="formRef" @success="handleSuccess" />
35  <el-button type="primary" @click="handleSubmit">提交</el-button>
36</template>
37
38<style scoped></style>

Attributes

名称	类型	说明
success	Function	保存成功后的回调

Exposes

名称	类型	入参	说明
getTemplateDetail	Function	{id:1}	传递 object 对象，作为入参
getFormDetail	Function	{id:1}	传递 object 对象，作为入参，之后保存将处于编辑表单内容