iView的Modal填坑之旅

现象和需求描述:

        有个表格,需要添加登记和查看功能,准备用一个modal(模态)来实现。在设计过程中,希望能够实现最大的模块化和重用性。故一开始,设计了一个将iView的Modal和内部参数全部放入一个vue components组件中:

   子组件:
<template>
    <Modal
        :value="modalStatus"
        :title="dengji"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>Content of dialog</p>
	</Modal>
</template>
父组件调用子组件:
<!--<div v-if="modalwww"> -->
			<!-- <span>123</span>  :Imodal="true" -->
			<!--<InfoModal :Imodal="modalwww" :Idengji="dengjiii"></InfoModal>-->
		<!--</div>-->

  结果发现效果并不好,问题在于父界面并不能很好的控制子界面的展开。(最大的问题在于父组件props在子界面绑定效果不好,点开后没有数据,然后去修改子组件的代码,保存,npm自动重新编译后,又能展示数据,比较明显的渲染顺序问题!个人认为将Modal也定义在子界面其实和下面的方法没有本质区别,只是个人没有去深入下去考虑如何实现和修复bug)

问题解决:        

        简单修改,将<Modal>置于父组件中,通过判断来展示和隐藏子界面。

<!--<InfoModal :Imodal="modalwww" :Idengji="dengjiii"></InfoModal>-->
			<Modal
		        v-model="modalwww"
		        title="新增违法建筑登记----基本信息"
		        :styles="mstyles"
		        @on-ok="ok"
		        @on-cancel="cancel">
		        <div v-if="modal_status">
		        	<InfoList :IItem="itemChakan" :key="itemChakan"></InfoList>
		        </div>
		 </Modal>
		<!--</div>-->

        InfoList是子界面的主体(涉及业务,暂不展示),通过父界面的button或者@click来控制modal_status的是与否

//登记函数
			dengji:function(){
				//登记传递一个空对象
				this.itemChakan = {
                    	******//{}中间是对象细节, object.item: ''  置为空即可
                    };
				this.modalwww = true;
				this.modal_status = true;
			},
			//查看函数
			chakan:function(chakanobject){
				//console.log("chakanobject:" + chakanobject.dsrxm);
				this.modal_status = true;
				this.itemChakan = chakanobject;
				this.modalwww = true;
			},

查看功能:

        查看的函数调用是在render中定义(在Table的column下)

{
                        title: '操作',
                        key: 'operation',
                        className: 'operation_css',
                        render: (h, params) => {
					    	return h('div', [
					        	h('div', {
					            	style: {
					                	display: 'inline-block',
					                	width: '50%',
					                	overflow: 'hidden',
					                	textOverflow: 'ellipsis',
					                	whiteSpace: 'nowrap',
					                	type: 'button',
					                	color: '#2d8cf0'
					            	},
					            	domProps: {
					                	title: '查看'
					            	},
					            	on:{
					            		click: ()=>{
					            			this.chakan(params.row);
					            		}
					            	}
					        	}, '查看'),
					        	h('a', {
					            	style: {
					                	display: 'inline-block',
					                	width: '50%',
					                	overflow: 'hidden',
					                	textOverflow: 'ellipsis',
					                	whiteSpace: 'nowrap'
					            	},
					            	domProps: {
					                	title: '删除',
					                	href: this.server + 'delete?编号=' + params.row.wfjzbh
					            	}
					        	}, '删除')
					    	]);	
					    }
on:{
					            		click: ()=>{
					            			this.chakan(params.row);
					            		}
					            	}

        chakan函数传递当前行的对象,通过mothods->chakan(chakanobject) 来修改data中的itemChakan,然后通过

   {  :item } 来向子组件传递,子组件接受并在InfoList中展示。

       查看功能细节问题:

                在关闭子模态框后,点开下一个查看时,仍然显示的是之前的数据,甚至点开登记,依然显示的第一个查看,思考过后认为存在的问题:

                模态框在打开后,就已经存在,点击关闭是调用的默认的方法,使其display:none;

              解决方法,就是在InfoList中增加:key回去检测对象是否已经修改,来重新生成节点对象。

<InfoList :IItem="itemChakan" :key="itemChakan"></InfoList>
思考:

        感觉功能实现的马马虎虎,部分细节没能结构化(套路化)

        在尝试的过程中,主要问题主要集中在dom节点的生成顺序和生存周期上,iView组件基于Vue.js ,不太熟悉渲染的过程,

容易导致部分组件生成空白,或者无法修改的问题,解决的思路大致为①双向动态绑定重新生成

                
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页