利用Vue构造器创建Form组件的通用解决方法

前言

在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。

在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如

<template> <header></header> ... <content></content> ... <footer></footer></template>

当用户的某个行为触发表单时（例如注册、建立内容等），期望在页面中弹出一个From组件。通常的做法是在template中填入一个<form>组件用于开发，并通过控制data中的UI.isOpen来对其display进行控制，例如在当前<template>组件内开发

<template> <header></header> ... <content></content> ... <footer></footer> ... <register-form v-if="UI.isOpen"> <form-item></form-item> ... <submit-button></submit-button> </register-form></template>

这样开发有一点优势，Form组件与其父组件之间可以通过prop以及$emit方便通信。但是也会有以下几个缺陷：

为了解决以上缺陷，并且还能具备方便通信的优势，本文选择用Vue.extend将原有<form>组件转化为method function，并维护在当前组件的method中，当用户触发时，在页面中挂载，关闭时自动注销。

实例

演示地址：演示实例

代码地址：FatGe github (本地下载)

APP组件

<template> <div id="app"> <el-button   type="primary" icon="el-icon-edit-outline"  @click="handleClick" >注册</el-button> </div></template><script>import register from './components/register'import { transform } from './transform'export default { name: 'App', methods: { register: transform(register), handleClick () {  this.register({  propsData: { name: '皮鞋' },  done: name => alert(`${name}牛B`)  }) } }}</script>

当<el-button>的点击事件触发时，调用register方法，将表单组件挂载在页面中。

Form组件

<template> <div class="mock" v-if="isVisible"> <div class="form-wrapper">  <i class="el-icon-close close-btn" @click.stop="close"></i>  ...<header />  ...<content />  <div class="footer">   <el-button     type="primary"    @click="handleClick"   >确定</el-button>   <el-button     type="primary"    @click="handleClick"   >取消</el-button>  </div> </div> </div></template><script>export default { porps: { ... }, data () { return {  isVisible: true } },  watch: { isVisible (newValue) {  if (!newValue) {  this.destroyElement()  } } },  methods: { handleClick ({ type }) {  const handler = {  close: () => this.close()  } }, destroyElement () {  this.$destroy() }, close () {  this.isVisible = false } },  mounted () { document.body.appendChild(this.$el) },  destroyed () { this.$el.parentNode.removeChild(this.$el) }}</script>