怎么编写一个可配置的vue表单组件？

简介

在做一些业务项目的时候，有很多需要编写大量表单的需求。总是从0写一个表单组件那是万万不行的，本着避免重复工作的目的，让自己有时间能干些有益身心的事情，有必要将表单组件开发配置化。本文介绍一下我在工作中是如何一步步完成了一个基于 vue 的 移动端 配置化表单组件。

从通用配置角度来看，移动端表单类组件都有如下通用的业务诉求：

• 能够支持字段提交 key 的配置
• 能够支持各种字段类型的配置
• 能够支持一定的布局配置，比如 label 和 控件 是横向的还是纵向的布局
• 能够支持字段的分组配置，每个分组能够设置自己的标题
• 能够支持表单验证规则的配置
• 能够处理一些常见的联动效果
• 能够配置一些控件的选项数据
• 一些通用的控件属性配置，比如 disabled、placeholder等
• 控件的个性化配置

基于上述需求假设，我们的组件配置数据和调用方式大概可以是长这个样子

// 配置数据
var schema = {
    groups: [{  // <----- 字段分组
        name: "groupKey1",
        title: "基本信息"
    }],
    fields: [{
        type: "input", // <----- 字段类型
        name: "name", // <----- 字段key
        label: "姓名", // <----- 字段label
        props: { // <----- 字段配置
            length: 10, // <----- 个性化属性
            placeholder: "请输入" // <----- 通用属性
        },
        group: "groupKey1",  // <----- 所属分组
        rules: [] // <----- 字段规则，可以有多个规则，所以应该是个数组
        depends: [] // <----- 字段联动，可以有多个联动，所以应该是个数组
    },{
        type: "select",
        name: "city",
        label: "所在城市",
        props: {
        },
        group: "groupKey1"
    }]
 }
 
// 组件调用
<Form :schema="schema"/>

接下来就是编写组件实现了，因为这个实现比较复杂，我们会分章节逐步完成

• 第一章：环境搭建

• 第二章：最基本表单骨架

• 第三章：字段规则校验

• 第四章：字段联动