基于 vue 和 element-plus 实现的表单设计器 + 渲染器
使用了最新的前端技术栈,可以让你免去vue项目中表单的烦恼。
vue@3.x
npm i vue-form-craft
//或
yarn add vue-form-craft
//或
pnpm i vue-form-craft
import { createApp } from 'vue'
import VueFormCraft from 'vue-form-craft'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(VueFormCraft)
app.mount('#app')
使用表单设计器
<template>
<div style="width:100vw;height:100vh">
<FormDesign />
</div>
</template>
使用表单渲染器
<template>
<FormRender v-model="formValues" :schema="schema" ref="formRef" />
<el-button @click="handleSubmit">提交</el-button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { FormSchema,FormInstance } from 'vue-form-craft'
const formRef = ref<FormInstance>()
const formValues = ref({})
const schema: FormSchema = {
labelWidth: 150,
labelAlign: 'right',
size: 'default',
items: [
{
label: '用户名',
component: 'Input',
name: 'username',
required: true,
props: {
placeholder: '请输入用户名'
}
},
{
label: '密码',
component: 'Password',
name: 'password',
required: true,
props: {
placeholder: '请输入密码'
}
}
]
}
const handleSubmit = async () => {
await formRef.value?.validate()
alert(JSON.stringify(formValues.value,null,2))
}
</script>
vue-form-craft
的文档和代码完全开源,如果该项目有帮助到你的开发工作,你可以捐赠vue-form-craft
的研发工作,捐赠无门槛,哪怕是一杯可乐也好。