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

avatar
@D2Projects

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

示例源代码 github

操作演示（GIF 较大）：

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

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

  • vue.js 单文件组件，
  • 组件传参
  • 自定义 v-model
  • 数据监听
  • 数据合并
  • 批量自动注册组件
  • 使用 mixin 抽取公用代码
  • sass 语法
  • BEM 规范
  • 尽量避免使用 for 循环的写法
  • <component> 组件
  • 动态绑定 v-model 到一组数据

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

下面开始正文

总览

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

搭建基本框架

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

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

<template>
  <d2-container>
    <template slot="header">可配置问卷示例</template>
    <div class="questionnaire">
      <el-container>
        <!-- 左侧位置 -->
        <!-- 中间位置 -->
        <!-- 右侧位置 -->
      </el-container>
    </div>
    <template slot="footer">从左侧选择要添加的表单块，右侧查看结果</template>
  </d2-container>
</template>

<script>
export default {
  name: 'page1',
  components: {
    // 这里以后要要注册表单区块 左侧边栏 右侧边栏
  },
  data () {
    return {
      formList: [], // 所有注册的表单区块
      forms: [] // 用户已经选择的表单区块
    }
  }
}
</script>

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

表单区块

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

<template>
  <el-form ref="form" :model="form" label-position="top">
    <el-form-item label="姓名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="姓名">
      <el-radio-group v-model="form.usersex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'Form1',
  props: {
    value: {
      default: () => ({
        username: '',
        usersex: 1
      })
    }
  },
  data () {
    return {
      form: {
        username: '',
        usersex: 1
      }
    }
  },
  watch: {
    form: {
      // 处理方法
      handler (value) {
        this.$emit('input', value)
      },
      // 深度 watch
      deep: true,
      // 首先自己执行一次
      immediate: true
    }
  }
}
</script>

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

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

<script>
components: {
  // 注册组件
  Form1: () => import('./components/Form/Form1.vue')
},
data () {
  return {
    // 注册到数据
    formList: [
      {
        title: '基础',
        name: 'Form1'
      }
    ]
  }
}
</script>

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

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

表单区块示例

<template>
  <el-form ref="form" :model="form" label-position="top">
    <el-form-item label="姓名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="姓名">
      <el-radio-group v-model="form.usersex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  // 排序使用
  index: 1,
  // 组件标题
  title: '基础',
  // 组件名
  name: 'Form1',
  props: {
    value: {
      default: () => ({
        username: '',
        usersex: 1
      })
    }
  },
  data () {
    return {
      form: {
        username: '',
        usersex: 1
      }
    }
  },
  watch: {
    form: {
      handler (value) {
        this.$emit('input', value)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

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

<script>
import sortby from 'lodash.sortby'
const req = context => context.keys().map(context)
const forms = req(require.context('./components/Form/', false, /\.vue$/))
const components = {}
const formList = []
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 })
})
export default {
  components,
  data () {
    return {
      formList
    }
  }
}
</script>

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

首先介绍 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 组件：

<template>
  <el-form ref="form" :model="form" label-position="top">
    <el-form-item label="姓名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="姓名">
      <el-radio-group v-model="form.usersex">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="0">女</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
import mixin from './mixin'
export default {
  index: 1,
  title: '基础',
  name: 'Form1',
  mixins: [
    mixin({
      username: '',
      usersex: 1
    })
  ]
}
</script>

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

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

<template>
  <d2-container>
    <template slot="header">
      可配置问卷示例
    </template>
    <div class="questionnaire">
      <el-container>
        <aside-left
          :all="formListUseful"
          :selected="forms"
          @select="handleAsideSelect"
          @remove="handleAsideRemove"/>
        <el-main class="questionnaire__main">
          <div class="questionnaire__container">
            <el-card
              v-for="(form, index) in forms"
              :key="index"
              shadow="never"
              class="questionnaire__card">
              <template slot="header">
                {{form.title}}
              </template>
              <div style="margin-bottom: -20px;">
                <component
                  :is="form.name"
                  v-model="forms[index].data"/>
              </div>
            </el-card>
          </div>
        </el-main>
        <aside-right :res="res"/>
      </el-container>
    </div>
    <template slot="footer">
      从左侧选择要添加的表单块，右侧查看结果
    </template>
  </d2-container>
</template>

<script>
import sortby from 'lodash.sortby'
const req = context => context.keys().map(context)
const forms = req(require.context('./components/Form/', false, /\.vue$/))
const components = {}
const formList = []
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 })
})
export default {
  name: 'page1',
  components: {
    ...components,
    AsideLeft: () => import('./components/AsideLeft'),
    AsideRight: () => import('./components/AsideRight')
  },
  data () {
    return {
      formList,
      forms: []
    }
  },
  computed: {
    // 合并最后结果
    res () {
      return Object.assign({}, ...this.forms.map(e => e.data))
    },
    formListUseful () {
      return this.formList.filter(e => !this.forms.find(f => f.name === e.name))
    }
  },
  methods: {
    handleAsideSelect (val) {
      this.forms.push({
        ...val
      })
    },
    handleAsideRemove (index) {
      this.forms.splice(index, 1)
    }
  }
}
</script>

<style lang="scss">
@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;
      }
    }
  }
}
</style>

左侧页面组件

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

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

<template>
  <el-aside
    width="200px"
    class="questionnaire__aside--left">
    <!-- 已经选择的区块列表 点击每个按钮后开始删除响应的区块 -->
    <div
      v-for="(item, index) in selected"
      :key="index"
      class="d2-mb-10">
      <el-button
        @click="handleRemove(item, index)"
        style="width: 100%;">
        {{item.title}}
      </el-button>
    </div>
    <!-- 新建区块按钮 -->
    <div>
      <el-button
        type="primary"
        style="width: 100%;"
        @click="dialogVisible = true">
        <d2-icon name="plus"/> 新增
      </el-button>
    </div>
    <!-- 选择区块界面 -->
    <el-dialog
      title="选择区块"
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible">
      <p class="d2-mt-0">区块标题</p>
      <el-input v-model="title"></el-input>
      <p>区块组件</p>
      <el-alert
        v-if="all.length === 0"
        type="error"
        title="没有可用区块"/>
      <el-radio-group
        v-else
        v-model="name"
        size="small">
        <el-radio-button
          v-for="(item, index) in all"
          :key="index"
          :label="item.name">
          {{item.title}}
        </el-radio-button>
      </el-radio-group>
      <span slot="footer">
        <el-button
          @click="dialogVisible = false">
          取 消
        </el-button>
        <!-- 如果没有区块可用 不显示确定按钮 -->
        <el-button
          v-if="all.length !== 0"
          type="primary"
          @click="handleSelect">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </el-aside>
</template>

<script>
export default {
  name: 'AsideLeft',
  data () {
    return {
      // 新建区块的 dialog 显示控制
      dialogVisible: false,
      // 新建区块时设置的区块标题
      title: '新区块',
      // 新建区块时选择的区块
      name: ''
    }
  },
  props: {
    // 所有可选区块
    all: {
      default: () => []
    },
    // 用户已经选择的区块
    selected: {
      default: () => []
    }
  },
  watch: {
    // 用户选择一个区块后，标题自动改为这个区块的默认标题
    name (value) {
      this.title = this.all.find(e => e.name === value).title
    }
  },
  methods: {
    // 用户选择区块完毕
    handleSelect () {
      // 关闭 dialog
      this.dialogVisible = false
      // 发送事件
      this.$emit('select', {
        name: this.name,
        title: this.title,
        data: {}
      })
    },
    // 用户删除区块
    handleRemove (item, index) {
      this.$confirm(`删除 "${item.title}" 区块吗`, '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送事件
        this.$emit('remove', index)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

右侧页面组件

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

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

<template>
  <el-aside
    width="200px"
    class="questionnaire__aside--right">
    <div
      v-for="(item, index) in reslist"
      :key="index">
      <div
        class="questionnaire__res-key">
        {{item.keyName}}
      </div>
      <div
        class="questionnaire__res-value">
        {{item.value === '' ? '未填写' : item.value}}
      </div>
    </div>
  </el-aside>
</template>

<script>
export default {
  props: {
    // 接收表单结果
    res: {
      default: () => ({})
    }
  },
  computed: {
    // 处理数据格式
    reslist () {
      return Object.keys(this.res).map(keyName => ({
        keyName,
        value: this.res[keyName]
      }))
    }
  }
}
</script>

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

  • 页面组件
  • 两个侧边栏
  • 表单区块
  • 表单区块 mixin

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

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

参考

地址 描述
掘金专栏 掘金专栏
团队主页 开源团队主页
D2Admin 中文文档 中文文档
D2Admin 预览地址 完整版 预览地址
D2Admin github 完整版 Github 仓库
ElementUI ElementUI 组件库
avatar
文章
阅读
粉丝
相关推荐
vue-easy-form: json配置型的动态表单
5.3k阅读
 · 
15点赞
Vue自定义表单设计
961阅读
 · 
1点赞
动态表单设计-指导思想
3.2k阅读
 · 
8点赞
Vue动态表单
223阅读
 · 
0点赞
手摸手教程：如何实现一个可编程的Vue动态表单？
5.0k阅读
 · 
30点赞
【vue】基于element-ui动态表单的封装
1.1k阅读
 · 
1点赞
vue进阶学习之路3-自定义组件Form表单
4.0k阅读
 · 
3点赞
一天撸一个vue表单生成器 | 创作者训练营
1.9k阅读
 · 
10点赞
支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component
3.9k阅读
 · 
31点赞

友情链接：