vue-form-craft，基于vue3的开箱即用表单方案

一、前言

首先祝各位朋友们新年快乐！龙年大吉！

在前端开发过程中，表单渲染是重要且繁琐的一环。为了提高开发效率并避免重复工作，我开发了一款基于vue3 的表单工具，并取名vue-form-craft（vue表单工艺）。
是适用于 vue3项目 中后台表单的一种通用解决方案。

本文将介绍 vue-form-craft 的基本概念、使用方式及高级特性。

二、简介

vue-form-craft 主要由FormDesign（表单设计器） 和 SchemaForm（表单渲染器） 组成。

FormDesign通过拖拽快速生成JsonSchema，SchemaForm使用 JsonSchema 协议渲染表单

在线预览

文档

github源码

优势

• 轻量级： 可以通过npm依赖直接集成到你的vue3项目
• 易于使用：容易上手，可以通过表单设计器可视化拖拽的方式快速生成表单。
• 协议简单：遵循 JsonSchema 规范，因此相对容易理解和上手。
• 较强的配置能力：具有较强的配置能力，可以对表单联动、校验、布局以及数据处理等方面进行配置。
• 良好的性能体验：底层采用 element plus 的 Form 来实现表单的数据收集和管控，同时针对控件渲染层面进行优化处理，从而大幅提升性能，使得在使用过程中具有良好的性能体验。
• 内置组件丰富：内置组件非常丰富，包括基础组件、嵌套卡片类组件和动态增减 List 组件等，可以满足大多数场景的表单实现需求。
• 扩展性强：具有非常强的扩展性，支持自定义各种类型的表单控件，支持多种ui库，用户可以根据实际需要进行定制，非常灵活。

三、如何使用

最新版本v3.0.8 已经支持ts类型检查，推荐vue3+ts项目引入使用！

1、安装依赖

npm i vue-form-craft
1

2、全局注册

import { createApp } from 'vue'
import App from './App.vue'
import VueFormCraft from 'vue-form-craft'
const app = createApp(App)

app.use(VueFormCraft)
app.mount('#app')

1
2
3
4
5
6
7
8

3、使用

<template>
  <schema-form :schema="schema" footer @onFinish="onFinish" />
</template>

<script setup lang="ts">
import type { schemaType , formValuesType } from 'vue-form-craft'

const schema: schemaType = {
  labelWidth: 150,
  labelAlign: 'right',
  size: 'default',
  items: [
    {
      label: '用户名',
      component: 'Input',
      props: {
        placeholder: '请输入用户名'
      },
      name: 'username'
    },
    {
      label: '密码',
      component: 'Password',
      props: {
        placeholder: '请输入密码'
      },
      name: 'password'
    }
  ]
}

const onFinish = (values: formValuesType) => {
  alert(JSON.stringify(values))
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

4、通过表单设计器拖拖拽拽 快速生成JsonSchema

<template>
  <form-design @onSave="(schema) => console.log(schema)" />
</template>
1
2
3

四、一分钟读懂JsonShema

首先，我们要理解，JSON Schema就是 表单的抽象 。

JSON的最外层是表单整体的配置，items里面是每个字段的配置。

items里是每个字段的抽象，label、name、component等是每个字段的通用配置。

component代表使用什么组件，props是传给该组件的props。大部分组件都是基于el二次封装，所以也支持该组件在el文档的所有props

{
  "labelWidth": 150,   //表单label宽度
  "labelAlign": "right",   //表单label对齐方式
  "size": "default",   //表单字段大小
  "items": [  //表单所有字段的配置
    {
      "label": "用户名", //字段的label
      "component": "input", //字段使用的组件
      "props": {    //传给该组件的props，支持该组件在element plus的所有props
        "placeholder": "请输入用户名"
      },
      "name": "username" //唯一标识，也就是值key
    },
    {
      "label": "密码",
      "component": "password",
      "props": {
        "placeholder": "请输入密码"
      },
      "name": "password"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

五、表单联动

要评价一个表单工具能力强不强，表单联动能力至关重要。 vue-form-craft 通过 模板引擎 动态生成JsonSchema，让表单联动变得非常容易。

1、模板表达式

模板表达式为字符串格式，以双花括号 {{ … }}为语法特征，对于简单的联动提供一种简洁的配置方式。

在JsonSchema中，被双花括号包裹的字符串一律会被解析为 js表达式并返回结果，且只能使用联动变量。这种联动方式能应对大部分联动场景