0.0.13 • Published 11 months ago

@klaus_v_reinherz/v-formdesigner v0.0.13

Weekly downloads
-
License
-
Repository
-
Last release
11 months ago

动态表单设计器

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

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

Exposes

名称类型入参说明
getTemplateDetailFunction{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

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

Exposes

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

11 months ago

0.0.12

11 months ago

0.0.11

12 months ago

0.0.10

12 months ago

0.0.9

12 months ago

0.0.8

12 months ago

0.0.7

12 months ago

0.0.6

12 months ago

0.0.5

12 months ago

0.0.4

12 months ago

0.0.3

12 months ago

0.0.2

12 months ago

0.0.1

12 months ago