xinnian999 / vue-form-craft

基于vue3的一款开箱即用表单方案
278 stars 20 forks source link

vue-form-craft

基于 vueelement-plus 实现的表单设计器 + 渲染器

使用了最新的前端技术栈,可以让你免去vue项目中表单的烦恼。

ui

特性

第三方插件

使用

版本要求

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 的文档和代码完全开源,如果该项目有帮助到你的开发工作,你可以捐赠vue-form-craft的研发工作,捐赠无门槛,哪怕是一杯可乐也好。