VUE Cookbook 系列：实现可配置组合表单

本案例将会讲解如何使用 vue.js + ElementUI 开发一个简单的 可配置组合表单 Demo。

image

示例源代码 github

操作演示：

image

在左侧新建表单区块，选择区块标题和表单组件类型后点击确定，会在中间区域生成一个块新的表单，右侧展示了所有表单的数据合并结果。

在本示例中你主要可以看到以下知识点的运用：

• vue.js 单文件组件，

• 组件传参

• 自定义 v-model

• 数据监听

• 数据合并

• 批量自动注册组件

• 使用 mixin 抽取公用代码

• sass 语法

• BEM 规范

• 尽量避免使用 for 循环的写法

• 组件

• 动态绑定 v-model 到一组数据

上面列举的这些是因为以前有群里朋友询问相关的实现方法，在此列出，可能正在读这篇文章的你已经都掌握了，恭喜你！（本篇文章的起因也是群友提问）

下面开始正文

这个 demo 的所有组件和逻辑如果写在一个文件中大概会有几百行，维护起来会有麻烦，所以首先设计这样的目录结构：

image

为了快速开发页面本项目使用 ElementUI 和 D2Admin 快速搭建，以下示例中组件都来自这两个开源项目，如果你不认识这些组件也没有关系，大致了解意思就可。

首先写出页面的大致框架：

    
      
        
        
        
      
    
    从左侧选择要添加的表单块，右侧查看结果
  

css / sass 暂时先忽略，在最后会展示样式代码

新建 page1/components/Form/Form1.vue 作为第一个表单区块

这是用 ElementUI 构建的很简单的一个表单，甚至没有校验。

然后我们在页面组件上注册这个表单区块：

等等，假如我有 20 个区块，难道要写 20 遍注册，在 formList 里手动加 20 个对象吗？

所以我们先新建了 7 个区块，区块内容都大同小异，并将代码稍加改造：

表单区块示例

页面组件（只展示重点部分）

你可能要问，上面这一大坨是什么鬼 ？？？

首先介绍 webpack 的 require-context 你可以点击链接查看官方文档。

简单通俗来讲这个方法就是为了方便引入大量文件用的，它接收三个参数

• 你要引入文件的目录

• 是否要查找该目录下的子级目录

• 匹配要引入的文件

然后会返回一个 require 对象，对象有三个属性：resolve 、keys、id

• resolve: 是一个函数，他返回的是被解析模块的id

• keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成

• id：上下文模块的id

所以在上面代码中

const req = context => context.keys().map(context)const forms = req(require.context('./components/Form/', false, /.vue$/))

最后得到的 forms 就是 ./components/Form/ 目录下所有的 vue 文件对象

然后通过

sortby(forms.map(e => {  const component = e.default  const { index, title, name } = component  return { component, title, index, name }
}), ['index']).forEach(form => {  const { component, title, name } = form
  components[name] = component
  formList.push({ title, name })
})

处理 forms 对象，得到 vue 注册组件时需要的的 components 格式，并且将所有的组件信息保存进 formList 供页面逻辑使用。具体的转换方式请查看上面的代码。

这样不管我们在 ./components/Form/ 下写了多少单文件组件，webpack 都会自动帮我们引入并通过我们的代码注册到页面中。

大量组件注册的问题解决了，接下来我们还要一个需要优化的问题：

不管是 Form1 还是 Form2 还是 FormN，大家会发现其实代码里有一些重复内容，还有一些是有逻辑关系的重复内容，下面我们通过写一个 mixin 来减少重复代码：

mixin.js：

export default function (form) {  return {    props: {      value: {        default: () => form
      }
    },
    data () {      return {
        form
      }
    },    watch: {      form: {
        handler (value) {          this.$emit('input', value)
        },        deep: true,        immediate: true
      }
    }
  }
}

这个 js 文件导出了一个函数，该函数接收一个 form 参数，并将这个参数赋值给 value prop 以及 data 中的 form 字段并返回一个对象。

然后我们将这个 mixin 注册进每个 Form 组件中，并且改造每个 Form 组件：

这样每个 Form 组件都节省下了十几行代码，关键是这些代码是重复冗余的。

最后页面组件是这个样子：

    
      
        
        
          
            
              
                {{form.title}}              
              
                
              
            
          
        
        
      
    
    
      从左侧选择要添加的表单块，右侧查看结果    
  @import '~@/assets/style/public.scss';
.questionnaire {
  @extend %full;
  .el-container {
    @extend %full;
  }
  .questionnaire__aside--left {
    border-right: 1px solid #cfd7e5;
    padding: 20px;
  }
  .questionnaire__aside--right {
    border-left: 1px solid #cfd7e5;
    padding: 20px;
    .questionnaire__res-key {
      font-size: 12px;
      line-height: 14px;
      color: $color-text-sub;
    }
    .questionnaire__res-value {
      font-size: 14px;
      line-height: 20px;
      color: $color-text-normal;
      margin-bottom: 10px;
    }
  }
  .questionnaire__main {
    background-color: rgba(#000, .05);
  }
  .questionnaire__container {
    max-width: 400px;
    margin: 0px auto;
    .questionnaire__card {
      border: 1px solid #cfd7e5;
      margin-bottom: 20px;
      .el-form-item__label {
        line-height: 16px;
      }
    }
  }
}

左侧右侧组件不是重点内容，所以一次性展示出带有注释的代码

新建 page1/components/AsideLeft/index.vue 作为左侧页面组件

左侧右侧组件不是重点内容，所以一次性展示出带有注释的代码

新建 page1/components/AsideRight/index.vue 作为右侧页面组件

所有代码就结束了，其实我们就写了五个文件

• 页面组件

• 两个侧边栏

• 表单区块

• 表单区块 mixin

这是一个很小但是涉及知识还不算少的小例子，如果上面的代码你有疑惑，可以来 D2 Projects 的 QQ 交流群 806395827 提问。

本文首发于 D2 开源项目组官方公众号 D2 Projects

作者：FairyEver
链接：https://www.jianshu.com/p/bfe881edbc4b