Vue项⽬封装表单类型组件（ElementUi）
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>';
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;
vue element admin}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){
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 = String()
attrElement +=' '+ attrString +' ';
}else{
attrString = key +'='+'"'+ attr[key]+'"';
attrString = String()
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 = d({
data(){
return{
rightFormData: wformData,
}
},
template: wShowInputElem,
mounted(){
// 判断有没有combogrid的属性
this.$refs.hasOwnProperty("combogrid")&&(thatbogrid =this.$refsbogrid);
},
});
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.$wformData =this.rightFormData
}
}
},
data(){
return{
}
},
mounted(){
},
methods:{
getinputElem(){// 渲染
this.$wformData =this.rightFormData;
if(this.formTypeValue.hasOwnProperty('elem')){
let arr ='';
arr =publicform(this.formTypeValue.elem,this.formTypeValue);
this.$wShowInputElem = arr;
}
},
disappear(){// 清除
this.$PublicFormbogrid.hasOwnProperty("disappear")&&this.$PublicFormbogrid.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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。