Vue 项目封装表单类型组件（ElementUi）

最新推荐文章于 2024-08-23 09:00:00 发布
最新推荐文章于 2024-08-23 09:00:00 发布
阅读量2.3k 收藏 8
点赞数 1
分类专栏： i-form i-input 文章标签： Vue 组件封装 表单组件 ElementUI 代码复用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/agca_zxl/article/details/116275255
版权

Vue 项目封装表单类型组件 iform.vue

当我们在做Vue项目时，有时候项目很大，页面功能比较多时，很多控件堆在一起，很是臃肿，管理起来很麻烦。因此，我们就需要封装一些组件，达到简洁高效、可复用的效果。本章节主要是介绍如何封装表单类型的组件。

封装表单类型组件需要用到的文件以及其他组件（重要）

1、i-input.vue 公用组件，是i-form组件的最重要的组件，主要封装的就是这个，i-form就是将i-input组件套了一层外壳（el-form）。因此，总的来说，是我们这章节主要封装的对象。

2、publicform.js 文件，这个文件就是一些封装组件的方法，文件里面定义了几种表单类型（input、select、selects、date、time、combogrid、combopanel、switch、input_number、input_numbers）。

3、myPublicForm i-input封装组件里面注册的子组件，是需要渲染的基础表单子组件，因为当我们publicform.js 文件返回给组件的是一大串html的字符串，如果直接使用 html属性渲染 那一大串html字符串时，是渲染不出来的，为什么呢？因为我这里vue项目使用了ElementUi框架，直接使用 html属性渲染是渲染不出来Elementui的各种标签的。因此，我们需要使用注册的子组件来渲染Elementui字符串。

一、publicform.js 文件的实现

// 封装基础组件框架
const getBaseElem = function(elem, opt) {
    let baseOptions = {
        type: '',
        model: '',
        placeholder: '',
        value: ''
    };
    var publicFrom = {
        input: function (attr) {
            if (attr) {
                let elemetOptions = getElement(attr);
                if (elemetOptions) {
                    var input = '<el-input' + elemetOptions + '></el-input>';
                    return input;
                } else {
                    return '<el-input></el-input>';
                }
            } else {
                
            }
        },
        select: function (attr, isMultiple) {
            if (!attr.option) {
                let elemetOptions = getElement(attr);
                if (elemetOptions) {
                    var select = '<el-select' + elemetOptions + '></el-select>';
                    return select;
                } else {
                    return '<el-select></el-select>';
                }
            } else {
                let elemetOptions = getElement(attr);
                if (elemetOptions) {
                    let multiple = isMultiple ? ' multiple ' : '';
                    var select = '<el-select' + elemetOptions + '' + multiple + '>';
                    attr.option.forEach(item => {
                        let elemetOptions = getElement(item);
                        select += '<el-option ' + elemetOptions + '></el-option>'
                    })
                    select += '</el-select>';
                    return select;
                } else {
                    return '<el-select></el-select>';
                }
            }
        },
        selects: function (attr) {
            return this.select(attr, true)
        },
        date: function (attr) {
            let elemetOptions = getElement(attr);
            if (elemetOptions) {
                var date = '<el-date-picker' + elemetOptions + '></el-date-picker>';
                return date;
            } else {
                return '<el-date-picker></el-date-picker>';
            }
        },
        time: function (attr) {
            let elemetOptions = getElement(attr);
            if (elemetOptions) {
                var time = '<el-time-picker' + elemetOptions + '></el-time-picker>';
                return time;
            } else {
                return '<el-time-picker></el-time-picker>';
            }
        },
        combogrid: function (attr) {
            if (attr) {
                let elemetOptions = JSON.stringify(attr);
                if (elemetOptions) {
                    var input = "<icombogrid ref='combogrid' :getOptions='"+elemetOptions+"'></icombogrid>";
                    return input;
                } else {
                    return '<icombogrid></icombogrid>';
                }
            } else {
                
            }
        },
        combopanel: function (attr) {
            if (attr) {
                let elemetOptions = JSON.stringify(attr);
                if (elemetOptions) {
                    var input = "<icombopanel :getOptions='"+elemetOptions+"'></icombopanel>";
                    return input;
                } else {
                    return '<icombopanel></icombopanel>';
                }
            } else {
                
            }
        },
        switch: function (attr) {
            let elemetOptions = getElement(attr);
            if (elemetOptions) {
                var time = '<el-switch' + elemetOptions + ' active-color="#13ce66"></el-switch>';
                return time;
            } else {
                return '<el-switch></el-switch>';
            }
        },
        input_number: function (attr) {
            let elemetOptions = getElement(attr);
            if (elemetOptions) {
                var time = '<el-input-number' + elemetOptions + ' controls-position="right"></el-input-number>';
                return time;
            } else {
                return '<el-input-number></el-input-number>';
            }
        },
        input_numbers: function (attr) {
            let array = {};
            let elemetOptions = getElement(attr);
            if (elemetOptions) {
                let time = '<div ' + elemetOptions + '>';
                attr.numbers.forEach((item) => {
                    array = Object.assign({}, array, item);
                    let arrayElem = getElement(array);
                    time += '<el-input-number' + arrayElem + ' controls-position="right"></el-input-number>';
                });
                time += '</div>'
                return time;
            } else {
                return '<el-input-number></el-input-number>';
            }
        }
    };
    return publicFrom[elem](opt)
},
// 解析对象键值对成属性
getElement = function (attr) {
    var v = 'v-',
        el = 'el-',
        typeV = ["model", "if", "show", "for"],
        elemHas = ["type", "model", "placeholder", "value", "style", "label", "name"]; // 通用属性
    if (attr) {
        var attrString = '',
            attrElement = '';
        for (var key in attr) {
            elemHas.forEach(item => {
                if (key == item) {
                    if (key == "model") {
                        attrString = v + key + '=' + '"' + attr[key] + '"';
                        attrString = attrString.toString()
                        attrElement += ' ' + attrString + ' ';
                    } else {
                        attrString = key + '=' + '"' + attr[key] + '"';
                        attrString = attrString.toString()
                        attrElement += ' ' + attrString + ' ';
                    }
                }
            })
        }
        return attrElement;
    } else {
        throw new Error("attr属性必须有值!");
    }
}
export default getBaseElem

二、i-input组件的实现

template 只需要一个子组件

<template>
    <div>
        <myPublicForm ref="myPublicForm"></myPublicForm>
    </div>
</template>

script 注册子组件，并且引入publicform文件，然后再渲染到子组件里。

<script>
import publicform from '../modules/publicForm.js' // 引入公共表单组件
import {EventBus} from '../modules/event-bus.js' // 引入事件总线
import Vue from 'vue';
export default {
    components: { // 需要渲染的基础表单子组件
        myPublicForm: {
            props: {
                showInputElem: {
                    type: String,
                    default: '<div></div>'
                },
                formData: {
                    type: Object,
                    default: () => {
                        return {}
                    }
                },
            },
            mounted() {
            },
            watch: {
            },
            render(h) { // -----------------------渲染--------最重要的部分---------
                const that = this
                const com = Vue.extend({
                    data() {
                        return {
                            rightFormData: that.newformData,
                        }
                    },
                    template: that.newShowInputElem,
                    mounted() {
                    	// 判断有没有combogrid的属性
                        this.$refs.hasOwnProperty("combogrid") && (that.combogrid = this.$refs.combogrid);
                    },
                });
                return h(com, {});
            },
            data() {
                return {
                    newShowInputElem: this.showInputElem,
                    newformData: this.formData,
                    combogrid:{}
                }
            }
        }
    },
    props: {
        formTypeValue: {
            type: Object,
            default: () => {
                return {}
            }
        },
        rightFormData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    watch: {
        rightFormData: {
            deep: true,
            handler (newValue) {
                // console.log('rightform', newValue)
                this.$refs.myPublicForm.newformData = this.rightFormData
            }
        }
    },
    data() {
        return {
        }
    },
    mounted() {
        this.getinputElem();
    },
    methods: {
        getinputElem() { // 渲染
            this.$refs.myPublicForm.newformData = this.rightFormData;
            if (this.formTypeValue.hasOwnProperty('elem')) {
                let arr = '';
                arr = publicform(this.formTypeValue.elem, this.formTypeValue);
                this.$refs.myPublicForm.newShowInputElem = arr;
            }
        },
        disappear() { // 清除
            this.$refs.myPublicForm.combogrid.hasOwnProperty("disappear") && this.$refs.myPublicForm.combogrid.disappear();
        }
    }
}
</script>

style

<style lang="scss">
    .el-table__row .el-input {
        width: 100%;
        .el-input__inner {
            height: 100%;
        }
    }

</style>

三、i-form组件的实现

i-form 组件就比较简单，主要的工作就是将 i-input 包上一层
< el-form>
< el-form-item>**************< /el-form-item>
</ el-form>

template

<template>
    <div :model="model" class="i-form">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item :label="item.label" v-for="(item, index) in formTypeValue" :key="index">
                <iinput  :ref="'input_'+index" :formTypeValue="item" :rightFormData="rightFormData"></iinput>
            </el-form-item>
        </el-form>
        <slot></slot>
    </div>
</template>

script

<script>
import publicform from '../modules/publicForm.js' // 引入公共表单组件
import {EventBus} from '../modules/event-bus.js' // 引入事件总线
import Iinput from '../allPage/i-input.vue';
import Vue from 'vue';
export default {
    name: 'i-form',
    components: {Iinput},
    props: {
        model: { // model
            type: Object,
            default: () => {
                return {}
            }
        },
        rightFormData: { // 父级传的或者自己默认的model值
            type: Object,
            default: () => {
                return {}
            }
        },
        formTypeValue: { // 父级传的或者自己默认的表单集合
            type: Array,
            default: () => {
                return []
            }
        },
        timeValue: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
        }
    },
    watch: {
        rightFormData: {
            deep: true,
            handler(newValue) {
                console.log('form', newValue)
            }
        }
    },
    mounted() {
    },
    methods: {
        disappear() { // 清除
            this.formTypeValue.forEach((item,index) => {
                var key = `input_${index}`;
                this.$refs[key][0].disappear();
            });
        },
    }
}
</script>

style

<style lang="scss">
    .i-form {
        padding: 0 10px; 
        display: flex;
        align-items: center;
        .el-button {
            height: 30px;
        }
    }
    .el-input {
        width: 200px;
        height: 30px;
    }
    .el-form--inline .el-form-item {
        margin-right: 30px;
        margin-bottom: 0px;
    }
</style>

End ~

AGCA
关注
专栏目录
I-FORM-开源
04-25
I-FORM旨在成为一种创新的高度可配置的信誉框架。 它是用Java编写的，因此可以与所有相关技术结合使用，以在既有网站或新网站上实施功能全面的信誉系统。
【VUE项目实战】40、添加商品分类功能（一）
程序猿之洞
03-13 5017
接上篇《39、商品分类树形表格渲染和分页》 上一篇我们实现了“排序”和“操作”列的渲染，以及表格的分页效果。本篇我们来实现添加商品分类的功能。 我们最终要实现的效果： 首先点击添加分类按钮，会弹出相应的对话框，然后里面有“分类名称”以及“父级分类”的编辑框，其中“父级分类”为一个“级联选择框”（一个新组件）。 一、实现弹出页面的基本布局 我们在原来的“<el-card>”卡片视图标签的下方，添加Dialog对话框标签，用于展示弹出的添加对话框： <!-- 添加商品分类的对话框 -
vue 通用表格组件封装 附代码
最新发布
qiaomm的个人博客
08-23 669
代码结构如下所示，总共四个代码文件，如果只是为了学习表格组件封装，只需要看MyTable.vue以及app.vue即可。
Vue业务组件封装（二）Form表单
郊眠寺
06-27 9803
封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复用性。Form表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。使用表单，可以收集、验证和提交数据。表单常用的地方是在搜索、信息提交、内容编辑以及新增。搜索表单编辑表单这里以最基本的Form代码为例进行分析： 基本表单根据基本的Form代码，我们可以知道：通过分析Form代码我们可以通过一个配置文件去遍历得到el-form-item，然后在el-form-item上面绑定我们需要的
父子组件传值之父传子
qq_41910413的博客
12-22 259
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <meta ...
基于element-ui的vue组件的封装（三）
weixin_41432139的博客
07-17 431
封装一个element-ui风格的input组件
vue elementui 实现搜索栏公共组件封装的实例代码
10-15
在本文的代码示例中，`searchForm.vue`作为搜索栏表单组件，它会接受一个配置项数组，并循环遍历来渲染具体的表单项。每个表单项使用`formItem`组件进行封装，`formItem`组件根据传入的配置项来决定渲染什么类型的表...
基于element组件库封装的动态表单组件
07-15
"基于element组件库封装的动态表单组件"就是这样一个解决方案，它针对Vue3进行了优化，旨在帮助开发者更方便地创建和管理动态表单。 动态表单是一种能够根据数据结构自动生成表单的组件，通常用于处理复杂的表单...
vue复杂的form表单封装和使用
09-01
1、该组件封装了表单中的输入框、密码框、文本域、下拉框、单选、多选、日期、文件上传、按钮等元素； 2、动态设置表单排列样式； 3、使用slot，灵活修改元素； 4、组件可以直接使用，使用简单，方便，有使用示例和...
vue 封装grid 布局-表单.zip
01-21
这个压缩包"vue 封装grid 布局-表单.zip"显然包含了利用Vue.js进行组件封装的实践，特别是针对表格（grid）布局和表单设计。Vue与Element-UI或Iview-UI的结合是常见的做法，这两个都是基于Vue的UI组件库，提供了丰富...
vue elementui form表单验证的实现
10-17
Element UI提供了丰富的表单组件，例如 `<el-form>`、`<el-form-item>` 等，它们可以帮助开发者快速构建出复杂的表单界面。配合使用Vue的双向数据绑定（v-model），可以让表单数据的收集和展示变得非常简单。但是，...
vue Element ui中搜索的input框的封装
tongzhe1236的博客
06-25 395
关于vue ui组件的使用
基于element UI input组件自行封装“数字区间”输入框组件
m0_49515138的博客
11-30 3294
项目使用的是vue，组件库用的是element UI，但是element UI并没有提供数字区间组件，只提供了InputNumber 计数器输入框，如果用两个计数器输入框进行拼接也能满足需求，但是样式调试起来太过于复杂且不够灵活，不能令人满意，并且该数字区间输入框在其它界面也有这种需求，于是就在element input输入框的基础上自行封装了一个数字区间组件使用。在先输入最小值时，如果后输入的最大值小于最小值，则最大值默认为最小值，同理先输入最大值时，如果后输入的最小值大于最大值，则最小值默认为最大值。
Vue 创建组件外壳VNode原理分析
lznism666的博客
09-17 529
创建组件VNode <div> <test></test> </div> 上面这个页面被解析成了一个渲染函数 function() { with(this) { return _c('div', [ _c('test') ]) } } 这个_c就是创建VNode的入口，也就是实际上的_createElement函数 function _createElement( co
Vue 学习随笔系列四 -- form 表单封装
mm_0123456789的博客
04-10 2240
此案例包含 input 输入框， select 选择框 等，根据实际需求使用。
Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验
ding43930053的专栏
09-25 1645
刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。
vue2.0结合Element UI组件库中的form表单进行封装
2301_76251603的博客
05-18 1778
表单组件的封装
vue 封装动态生成form表单和table表格组件
weixin_43522687的博客
04-21 7811
背景 项目中经常遇到新加功能和之前功能类似，结构不变，只是名称和值变化，因此将常用的form表单检索和table表格展示进行封装，有助于提高开发效率和统一样式风格。 注：示例中使用iview框架，实际代码结构类似，供参考。 动态生成 form 表单组件 使用说明： 引入文件并注册 页面使用并传参，支持输入框、日期选择、下拉选择和查询按钮搜索项，搜索项后面可以通过插槽添加自定义内容 组件暴露出的数据为 form 表单项最新数据 API： form props 属性 说明 类型 默认值
vue 封装表单
m0_57796453的博客
06-09 789
临时写的，不够成熟，如果有更好的，希望能让小弟白嫖一下，谢谢大佬们😁😁😁
Vue ElementUI 表单验证封装与实践
"这篇文章主要介绍了在Vue.js框架中结合Element UI库进行表单验证的实现方法，作者分享了从EasyUI转向Vue+ElementUI的心得，并探讨了如何封装可复用的验证规则来应对复杂的用户需求。" 在前端开发中，表单验证是不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值