Vue 表单读写分发器 —— 编辑/详情的合并解决方案

有没有一套代码同时解决表单编辑和详情(预览)两个页面的解决方案呢？

与互联网 to C 项目比，to B 以管理后台为主，没有太多复杂的交互，基本都是页面的增删改查，唯有一点就是量大！例如有一种场景需要实现表单的编辑功能。场景地址

场景

edit.png

很简单，这个页面用 element-ui 的表单组件就能完成。然后又需要一个表单的详情功能。

detail.png

上面的编辑页和详情页，除了一个用来编辑，一个用来展示，其他都是一样的。编辑页用 element-ui 开发，详情页我们还需再开发一套，按照这种开发模式，就会有下面的问题：

问题

编码问题

编辑页需要写一遍，详情页也需要写一遍，即两遍。

样式问题

编辑页是现成的表单组件，不需要写样式，详情页需要重新写一遍，而且风格要和表单组件保持一致。

数量问题

如果一个前端项目大概有 20 到 40 组这样的页面，而一个管理系统由 10 个前端项目，10 个以上的后端项目组成。那么一个完整的管理系统会有 200 组以上编辑详情页面。

维护问题

需求会改动，设计也会改动。当表单项增一项或减一项，编辑页要改一遍，详情页也要改一遍；当表单布局从一行两列改为一行三列，编辑页要改一遍，详情页也要改一遍。

一两个页面还好，但是 to B 项目量大！维护起来就非常痛苦了。

解决方案

如果把它们写成一个文件会不会更好呢，一般的想法将编辑页和详情页合并成一个文件，通过 v-if 来实现编辑和详情的判断，如下：

  <el-form ref="form" :model="form">
    <el-form-item label="活动名称">
      <template v-if="state='edit'">
        <el-input v-model="form.name" />
      </template>
      <template v-else>
        <div class="form-item--detail">
          <label>活动名称</label>
          <div class="form-item__content">{{ form.name }}</div>
        </div>
      </template>
    </el-form-item>
    ...
  </el-form>

这样会导致代码量剧增，可读性和维护性大大降低。一两个这样的文件起来还行，试想一下成百上千个这样的文件，那维护起来就是一场灾难了。

组件分发器(传送门)就能解决这个问题，直接上代码。

以 element-ui 为例，表单（编辑页）我们是这样写的：

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="活动名称">
      <el-input v-model="form.name" />
    </el-form-item>
    ...
  </el-form>
</template>

换成分发器可以这样写：

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="活动名称">
      <el-input-dispatcher v-model="form.name" />
    </el-form-item>
    ...
  </el-form>
</template>

<script>
export default {
  provide () {
    return {
      rwDispatcherProvider: this
    }
  },
  data () {
    return {
      rwDispatcherState: 'write',
      ...
    }
  }
}
</script>

使用分发器比较使用表单只多了三步：