最近遇到需要拖拽页面布局然后改变布局，先保存布局插件，我们选择的插件是vue-grid-layoutnpmivue-grid-layout--save官网：https://jbaysolutions.github....安装好插曲里的依赖后，发现项目可以启动。按照官网demo，发现页面是空白的，控制台提示找不到子组件。换个思路，不要用本地导入组件，使用全局导入组件。实施constlayout=ref([{x:0,y:0,w:1,h:1,i:0},{x:1,y:0,w:2,h:1,i:1},{x:0,y:1,w:2,h:1,i:2},{x:0,y:2,w:3,h:1,i:3},{x:2,y:1,w:1,h:1,i:4},]);{{item.i}}效果：但是！！拖到这里后，不判断每行是否满，拖完后会覆盖部分模块，导致出现空白区域，如下：想到要加一个check，检查每行是否满1.check函数import{LayoutItem}from'../types/index';import{cloneDeep}from'lodash'/***检查布局是否合法*1.深拷贝数组，避免污染原数组*2.得到y的最大值进行遍历*3.得到每个y的score数组按x*4升序排列，如果数组长度为1，判断w是否等于最大值x*5，如果数组长度不为1，遍历数组，判断每个元素的w是否等于下一个元素的x，累加w判断和是否等于最大x*6。如果合法，returnfalse*@paramlist*@returns*/exportconstverifyLayout=(list:Array):boolean=>{让yList=list.map(item=>{returnitem.y});yList=yList.sort((a,b)=>{returna-b});控制台日志（列表）；constnewArr=cloneDeep(列表);让标志=假；constmaxY=yList[yList.length-1];常量maxX=3;控制台日志（maxY）；for(leti=0;i<=maxY;i++){letarr=newArr.filter((item:LayoutItem)=>{returnitem.y===i;});console.log(arr,arr.length);if(arr&&arr.length>1){console.log('多个------------------',i);让calValue=0;arr=arr.sort((a:LayoutItem,b:LayoutItem)=>{returna.x-b.x})arr.forEach((childItem:LayoutItem,index:number)=>{calValue+=childItem.w;console.log('calValue------------',calValue,index);if(index!==arr.length-1&&calValue!==arr[index+1].x){flag=true;}if(index===arr.length-1&&calValue!==maxX){flag=true;}})}else{console.log('只有一个----------------',i);如果(arr[0].w!==maxX){flag=true}}}控制台。日志（标志）；returnflag;}思路是我对函数的注释在每次拖放完成的回调函数中验证/***拖放完成事件*1.将之前的数据存入历史数据*2.然后将完成的数据存入nowlayout数据*/constonItemMoved=()=>{console.log('moved--------------------')historyDataList.value.push(cloneDeep(nowLayoutData.value));nowLayoutData.value=cloneDeep(layout.value);//constflag=verifyLayout(layout.value);//if(flag){//goBack()//}};constgoBack=()=>{控制台。日志（historyDataList.value[historyDataList.value.length-1]）；layout.value=historyDataList.value[historyDataList.value.length-1];nowLayoutData.value=cloneDeep(layout.value);historyDataList.value.pop();这样，我们每次拖拽验证，如果无效就回滚，保证每一行都是满的！！！！
