注册页面例子，根据json表动态渲染组件和上送参数

大家都知道在项目中提高代码复用率，可以减少冗余代码量和节约开发时间，页面中的组件多了以后管理和使用，这里提供一种根据json表管理组件的设计思路。

核心思想就是把所有的组件都注册到json表里面，再把一些组件需要用到的静态参数登记在json表中，然后再根据需要动态传参过去并且动态渲染出来。

核心思路有了，现在就做一个简单的主页页面例子吧。

现给大家看看要实现的效果

 

首先新建一个输入栏位的组件

 然后再写上相应代码

<template>
	<div class="list_main">
		<div class="list_left">
			<span v-if="jsonObj.required">*</span>{{jsonObj.text}}
		</div>
		<div class="list_right">
			<input @blur="onBlur" :type="jsonObj.type" :maxlength="jsonObj.length" v-model="myInput" name="" />
		</div>
	</div>
</template>

<script>
	export default{
		name:'inputCom',
		data(){
			return{
				myInput:""
			}
		},
		props:{
			jsonObj:{
				type:Object,
				required:true
			}
		},
		methods:{
			onBlur(){
				this.$emit("getParm",this.jsonObj.name,this.myInput)
			}
		}
	}
</script>

<style>
	.list_main{
		width: 500px;
		display: flex;
	}
	.list_left{
		width: 30%;
	}
	.list_left span{
		color: red;
		float: left;
	}
	.list_right{
		width: 70%;
	}
</style>

所有的输入栏位都基于上面这个组件来实现

然后配置json表

{
	"components":[
		{
			"text":"账号",
			"name":"username",
			"showType":["fast","all"],
			"length":32,
			"type":"text",
			"required":true,
			"componentsName":"inputCom",
			"path":"inputCom.vue"
		},
		{
			"text":"密码",
			"name":"password",
			"showType":["fast","all"],
			"length":32,
			"type":"password",
			"required":true,
			"componentsName":"inputCom",
			"path":"inputCom.vue"
		},
		{
			"text":"确认密码",
			"name":"rePassword",
			"showType":["fast","all"],
			"length":32,
			"type":"password",
			"required":true,
			"componentsName":"inputCom",
			"path":"inputCom.vue"
		},
		{
			"text":"手机号",
			"name":"myPhone",
			"showType":["all"],
			"length":13,
			"type":"number",
			"required":false,
			"componentsName":"inputCom",
			"path":"inputCom.vue"
		},
		{
			"text":"姓名",
			"name":"trueName",
			"showType":["all"],
			"length":16,
			"type":"text",
			"required":false,
			"componentsName":"inputCom",
			"path":"inputCom.vue"
		},
		{
			"text":"身份证",
			"name":"IDcard",
			"showType":["all"],
			"length":18,
			"type":"text",
			"required":false,
			"componentsName":"inputCom",
			"path":"inputCom.vue"
		}
	]
}

各字段含义

text：输入为显示名称

name：栏位唯一标识

showType：在什么模式下面显示

length：输入最大长度

type：输入类型

required：是否为必输项

componentsName：使用的组件名称

path：组件所在路径

配置好了以后就可以动态渲染组件了

首先引入json文件

然后用<component>配合is来使用

<component v-for="(item,index) in comArr" :is="item.comsName" :key="index"             
        @getParm="getParm(arguments)"
		:jsonObj="item.comsObj">
</component>

 然后根据需要引入相应的组件

			// 动态渲染组件
			getComs() {
				this.comArr = []
				coms.components.forEach((item) => {
					if (item.showType.includes(this.showType)) {
						var comItem = require(`@components/${item.path}`)
						this.comArr.push({
							comsName: comItem.default,
							comsObj: item
						})
					}

				})
			}

这里判断当前的模式，切换模式后重新渲染相应的栏位

在点击提交以后判断必输项是否输入完整

			// 判断是否完整输入必输项
			checkInput() {
				var res=true;
				coms.components.forEach(item => {
					if (item.showType.includes(this.showType)) {
						if (item.required && (this.parms[item.name] === '' ||                     
                                this.parms[item.name] ===
							undefined)) {
							res= false;
						}
					}

				})
				return res;
			},

如果输入正确了以后根据当前模式上传相应的参数

			// 获取当前模式下上送参数
			getReqParms(){
				var newObj={};
				coms.components.forEach(item=>{
					if (item.showType.includes(this.showType)) {
						newObj[item.name]=this.parms[item.name]
					}
				})
				return newObj;
			},

可以看到大部分的实现逻辑都是基于对json表操作来实现的，这可以提高代码的组件化程度

喜欢的小伙伴可以点个赞，需要代码的朋友可以在这里下

GitHub - nicedays/jsonRander: 根据json表动态渲染组件和上送参数的注册页面例子