动态表单设计器

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

开始

安装

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

修改 mian.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus' //请自行导入ElementPlus并挂载
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import '@klaus_v_reinherz/v-formdesigner/dist/style.css' //引入所需样式

const app = createApp(App)
app.use(ElementPlus, {
  locale: zhCn,
})
app.mount('#app')

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

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

App.vue 中引入

<script setup lang="ts">
import { FormDesigner } from '@klaus_v_reinherz/v-formdesigner'
</script>

<template>
  <form-designer />
</template>

<style scoped></style>

FormDesigner 表单设计器

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

<script setup lang="ts">
import { ref } from 'vue'
import { FormDesigner } from '@klaus_v_reinherz/v-formdesigner'

let designeRef = ref<any>(null) //表单设计器组件

// 获取模板详情
function getDetail() {
  designeRef.value.getTemplateDetail({ id: 3 })
}

function handleSuccess() {
  console.log('保存成功')
}
</script>

<template>
  <el-button @click="getDetail">获取详情</el-button>
  <form-designer ref="designeRef" @success="handleSuccess" />
</template>

<style scoped></style>

Attributes

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

Exposes

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

FromCreate 表单

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

<script setup lang="ts">
import { ref } from 'vue'
import { FormCreate } from '@klaus_v_reinherz/v-formdesigner'

interface RuleFormData {
  [key: string]: any
}
let formRef = ref<any>(null) //表单组件

// 获取表单模板
function setFormTemplate() {
  formRef.value.getTemplateDetail({ id: 1 }) //id：模板id
}
  
// 设置表单数据
function setFormData() {
  formRef.value.getFormDetail({ id: 1 }) //id：表单id
}
  
// 校验
function handleSubmit() {
  formRef.value.validate()
}
  
// 后续业务处理，目前是组件内部走接口解决这个事情
function handleSuccess(form: RuleFormData) {
  console.log('保存成功，表单数据为：', form)
}
</script>

<template>
  <el-button @click="setFormTemplate">渲染表单</el-button>
  <el-button @click="setFormData">编辑表单内容</el-button>
  <form-create ref="formRef" @success="handleSuccess" />
  <el-button type="primary" @click="handleSubmit">提交</el-button>
</template>

<style scoped></style>

Attributes

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

Exposes

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