vue 封装Form表单组件

- 前景

在项目中很常见的交互：回显表单信息 + 验证表单 + 提交表单信息,而表单的类型也有很多（复选框，单选框，下拉框，输入框，文本框等等等）如果多个页面都有表单验证的交互且表单的内容不一样，难道我们就要去写多个表单组件吗？？？那该怎么办呢？？？？

- 作用

根据element-ui 的Form表单组件，写了一个公共的组件，可以满足大多数的表单类型的验证，做的这个组件主要是以弹窗的形式在页面上展示
主要的功能：
-显示弹窗（根据传入的数据来决定来显示表单）
-验证表单信息
-提交表单信息

- 具体代码

App.vue

想法：把弹窗组件挂载在app上，通过provide/inject实现跨级访问祖先组件的数据
app.vue(引入弹窗组件)

<template>
    <div id="app">
        <router-view :key="key"/>
        <form-dialog ref="formDialog" />
    </div>
</template>

<script>
import formDialog from '@/components/dialogFrom'
export default {
   
    name: 'App',
    components: {
   
        formDialog
    },
    computed: {
   
        key() {
   
            return this.$route.path + Math.random()
        }
    },
    provide() {
   
        const me = this
        return {
   
            showForm(...args) {
   
                me.$refs.formDialog.showDialog(...args)
            }
        }
    }
}
</script>

dialogFrom.vue(对应的弹窗组件)

<template>
    <el-dialog
        :title="formTitle"
        :visible.sync="formVisible"
        :close-on-click-modal="false"
        width="960px"
        class="common-form">
        <el-form ref="form" :model="formData" :rules="formRule" label-width="130px">
            <el-form-item v-for="(item, i) in formColumns" :key="i" :prop="item.property" :label="item.title">
                <!-- 文本框textarea -->
                <el-input
                    v-if="item.type === 'textarea'"
                    v-model.number="formData[item.property]"
                    v-bind="item.bind"
                    :placeholder="item.placeholder||'请输入'"
                    rows="7"
                    type="textarea"
                />
                <!-- radio -->
                <div v-else-if="item.type=='radio'" class="radio-wrapper">
                    <el-radio v-for="(opt, j) in item.options" :key="j" :label="opt.id" v-model="formData[item.property]">{
   {
    opt.name }}</el-radio>
                </div>
                <!-- 多选框checkbox -->
                <div v-else-if="item.type=='checkbox'" class="checkbox-wrapper">
                    <el-checkbox v-if="item.isAllCheck" :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange(item)">全选</el-checkbox>
                    <el-checkbox-group v-model="formData[item.property]" @change="handleCheckedUserGroupChange(item)">
                        <el-checkbox v-for="(opt, j) in item.options" :key="j" :label="opt.id">{
   {
    opt.name }}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <!-- 两个input + 加减按钮 -->
                <div v-else-if="item.type === 'mutliInput'" class="mutli-input-wrapper">
                    <ul class="mutli-input" >
                        <li v-for="(element, index) in formData[item.property]" :key="index" class="input-list">
                            <div class="input-wrapper">
                                <el-input
                                    v-model="element.key"
                                    :placeholder="item.placeholder ||'请输入'" />
                                <el-input
                                    v-model="element.value"
                                    :placeholder="item.placeholder||'请输入'" />
                            </div>
                            <div class="handle-btn">
                                <el-button type="primary" icon="el-icon-plus" circle @click="addConfigInput(item, formData[item.property], index)"/>
                                <el-button :disabled="item.isDelete" type="danger" icon="el-icon-delete" circle @click="cutConfigInput(item, formData[item.property], index)" />
                            </div>
                        </li>
                    </ul>
                </div>