Javascript Vue.js中基于Dom的分页

这是我正在进行的一个项目的简化版本。这就像一个伪编辑器，您可以在其中添加预先确定的块

newvue({
el:“应用程序”，
数据：（）=>({
区块：[{
学校：[{
名称：“”，
说明：“”
}],
大学：[{
名称：“”，
说明：“”
}],
工作：[{
名称：“”，
持续时间：“”
}],
}],
页高：800，
}),
创建（）{
//
},
方法：{
addSchool（索引）{
this.blocks[index].schools.push({
名称：“”，
说明：“”
})
这个。$nextTick（）。然后（（）=>{
this.checkContentOverflow（）；
})
},
大学（索引）{
this.blocks[index].schools.push({
名称：“”，
说明：“”
})
这个。$nextTick（）。然后（（）=>{
this.checkContentOverflow（）；
})
},
添加工作（索引）{
this.blocks[index].works.push({
名称：“”，
持续时间：“”
})
这个。$nextTick（）。然后（（）=>{
this.checkContentOverflow（）；
})
},
addBlock（）{
this.blocks.push（{}）；
},
删除（页面索引、索引、类型）{
const activeBlock=this.blocks[pageIndex]；
活动块[type]。拼接（索引，1）
},
getCurrentPage（索引）{
const pages=此$refs.page；
返回页[索引]
},
getContentType（类型）{
常量内容={
学校：{
名称：“”，
说明：“”
},
大学：{
名称：“”，
说明：“”
},
工作：{
名称：“”，
持续时间：“”
}
}
返回内容[类型]
},
checkContentOverflow（）{
const blocks=this.$refs.inputBlock；
常量溢出块=块。过滤器（（块）=>{
return block.offsetTop>this.pageHeight；
})
const elementToMove=溢出块[0]；
if（elementToMove）{
const blockAttr=elementToMove.getAttribute（'data-block'）；
const blockObj=JSON.parse（blockAttr）
常数{
页面索引，
指数
类型
}=blockObj；
if（this.blocks的类型[pageIndex+1]=“未定义”）{
这个.addBlock（）；
}
const presentBlock=this.blocks[pageIndex][type]。拼接（索引，1）；
const block=this.blocks[pageIndex+1]；
控制台日志（块）；
if（块[类型]）{
block[type].push（this.getContentType（type））
}否则{
block[type]=[this.getContentType（type）]
}
}
},
解析对象（对象）{
返回JSON.stringify（对象）
}
}
})

正文{
背景：#FFF；
填充：20px；
字体系列：Helvetica；
}
.第页{
宽度：750px；
高度：800px；
保证金：0自动；
边框：2个实心#ccc；
填充：20px；
溢出：隐藏；
}
.input block div{
显示器：flex；
弯曲方向：立柱；
文本对齐：左对齐；
背景色：#D3；
填充：0.5雷姆；
输入{
边缘底部：1rem；
最大宽度：80%；
}
}

新Vue({
el:“应用程序”，
数据：（）=>({
区块：[{
学校：[{名称：''，说明：'}]，
大学：[{名称：''，说明：'}]，
工作：[{名称：''，持续时间：'}]，
}],
页高：800，
}),
创建（）{
//
},
方法：{
addSchool（索引）{
this.blocks[index].schools.push（{name:''，description:''}）
这个。$nextTick（）。然后（（）=>{
this.checkContentOverflow（）；
})
},
大学（索引）{
this.blocks[index].schools.push（{name:''，description:''}）
这个。$nextTick（）。然后（（）=>{
this.checkContentOverflow（）；
})
},
添加工作（索引）{
this.blocks[index].works.push（{name:''，duration:''}）
这个。$nextTick（）。然后（（）=>{
this.checkContentOverflow（）；
})
},
addBlock（）{
this.blocks.push（{}）；
},
删除（页面索引、索引、类型）{
const activeBlock=this.blocks[pageIndex]；
活动块[type]。拼接（索引，1）
},
getCurrentPage（索引）{
const pages=此$refs.page；
返回页[索引]
},
getContentType（类型）{
常量内容={
学校：{名称：''，说明：'}，
大学：{名称：''，说明：'}，
工作：{名称：''，持续时间：'}
}
返回内容[类型]
},
checkContentOverflow（）{
const blocks=this.$refs.inputBlock；
常量溢出块=块。过滤器（（块）=>{
return block.offsetTop>this.pageHeight；
})
const elementToMove=溢出块[0]；
if（elementToMove）{
const blockAttr=elementToMove.getAttribute（'data-block'）；
const blockObj=JSON.parse（blockAttr）
const{pageIndex，index，type}=blockObj；
if（this.blocks的类型[pageIndex+1]=“未定义”）{
这个.addBlock（）；
}
const presentBlock=this.blocks[pageIndex][type]。拼接（索引，1）；
const block=this.blocks[pageIndex+1]；
控制台日志（块）；
if（块[类型]）{
block[type].push（this.getContentType（type））
}否则{
block[type]=[this.getContentType（type）]
}
}
},
解析对象（对象）{
返回JSON.stringify（对象）
}
}
})