vue-easy-form: json配置型的动态表单

vue-easy-from: 简称为esForm，是一个独立、不依赖第三方类库的vue表单组件；可经过一份json配置动态输出用户所须要的表单。

痛点

做为前端工程师，开发表单是屡见不鲜，是前端工程师的必修课之一。虽然vue这种数据驱动的开发框架给咱们带来极大的方便，可是每次开发表单时都要从新编写差很少同样的html、js、css，这是极度重复无趣、没养分、费时费力的事件。

vue资源(vue-awesome)表单类库的现状

笔者前期在开发vue表单时，也曾经直接应用过vue资源的表单类库，虽是json配置，但在使用的过程当中，也发现了很多问题。

• 基本上都是静态配置，无任何界面逻辑可言，（好比：A组件隐藏，B组件也须要隐藏等）；
• 类库运行依赖于类库自己定制化的组件，没法直接使用第三方组件；若想使用第三方组件，必须对第三方组件按当前的类库的组件规则进行封装，这样的组件只会是一次性使用，也没法在其它项目中重复利用，费时费力，极大增长用户的开发成本；
• 自定义组件须要全局声明，开发耦合度高，维护困难；
• 组件定制化，功能缺失，难以理解。

为何选择esForm?

• 写法简单，只须要一个json配置，几乎无需html, css；
• 布局丰富，支持弹性布局和tabs布局；
• 无缝对接第三方组件，无需为框架定制化组件（可自由选择element-ui、fish-ui、也可自定义vue组件），不增长用户的额外负担；
• 表单功能齐全，包含标题、验证、事件、单位、帮助、描述、数组等，这些能够直接配置，也能够自定义，无限制；
• 逻辑控制灵活方便（支持es写法和函数写法），用户能够任意操做；
• 组件引用即插即用，无须要全局声明，耦合度超低。

如何使用esForm

安装与引入

// 安装
npm install --save vue-easy-form

import esForm from "vue-easy-form"; // 引入
Vue.use(esForm);    // 插件安装
复制代码

实例

在插件安装时已经注册一个"es-form"的表单组件，使用时只须要配置一个schema便可

<es-form :schema="formSchema" v-model="formValue"></es-form>
复制代码

配置

formSchema中，每一项（如："name"）一般只须要配置3个属性，甚至可直接配置一个label（如："author"），简单方便。

data() {
    return {
      formValue: {
        // 自动同步表单的值
      },
      formSchema: {
        name: {
          label: "广告名称",        // label
          component: "el-input",    // 表单组件
          value: "首页位置"         // 初始值
        },
        author: "做者"  // 简写：至关于配置了label,其它的使用默认值
      }
    };
  }
复制代码

表单效果

直接对接第三方组件，无需为框架定制化组件

具体的使用方法可查看官方的开发文档和实例：
开发文档：chengaohe45.github.io/vue-easy-fo…
github：github.com/chengaohe45…