<style lang="scss" scoped>
.container{width: 50%;margin-left: 25%;margin-top: 1%;}
.child{border: 1px solid red;margin: 20px;}
.boxcccc{height: 700px;background-color: ivory;}
</style>
<!-- 全局样式 -->
<style lang="scss">
// style 不能加 scoped,否则动态创建的div的class的样式挂不上去
.wrapper {position: relative;border: 5px solid #ccc;margin-bottom: 10px;padding: 20px;}
.info-box {position: absolute;top: 0;left: 0;background: lightgray;padding: 5px;z-index: 1;}
</style>
<template>
<div id="container" class="container">
<!-- 原始子盒子 -->
<div class="child" style="height: 700px;">child</div>
<div class="dddd" style="height: 600px; background-color: burlywood;"></div>
<div class="tt" style="height: 100px; background-color: aquamarine;"></div>
<div class="ss_title" style="height:300px;">
<h3 style="background-color: darkgreen;">快乐的一天啊</h3>
</div>
<div class="box">
<!-- <HelloWorld></HelloWorld> -->
<h1>hhhh</h1>
</div>
<div id="wyz" style="height: 20px; background-color: cornsilk;">乌鱼子</div>
<div class="hh">
<!-- <BoxrHa></BoxrHa> -->
<h1>ssssssssssssss</h1>
</div>
<div class="boxcccc">
bottom
</div>
</div>
</template>
<script>
export default {
// 设置每页的高度 wrapperHeight 与 页头头部高度 headerHeight
mounted()
{
// 获取 container 元素
const container = document.querySelector('#container')
// 计算每个 wrapper 的固定高度
const wrapperHeight = window.innerHeight - 20 // 视口高度减去 20px
// 初始化变量
let totalHeight = 0
const children = Array.from(container.children)
let wrapper = null
const wrappers = []
const headerHeight = 50 // 假设 header 的高度为 50px
// 创建 wrapper 盒子并设置占位符文本
children.forEach(child =>
{
const style = getComputedStyle(child)
const childRect = child.getBoundingClientRect()
const childHeight = childRect.height +
parseFloat(style.marginTop) +
parseFloat(style.marginBottom) +
parseFloat(style.paddingTop) +
parseFloat(style.paddingBottom) +
parseFloat(style.borderTopWidth) +
parseFloat(style.borderBottomWidth)
// 计算 header 和内容的总高度
const availableHeight = wrapperHeight - headerHeight
if (!wrapper || (totalHeight + childHeight > availableHeight))
{
// 创建新的 wrapper 盒子
wrapper = document.createElement('div')
wrapper.style.height = `${wrapperHeight}px`
wrapper.style.overflow = 'hidden' // 隐藏溢出内容
wrapper.className = 'wrapper'
// 创建外层 div 元素
const header = document.createElement('div')
header.className = 'header'
header.style.height = `${headerHeight}px` // 设置 header 高度
// 创建 span 元素
const pageSpan = document.createElement('span')
pageSpan.className = 'page'
pageSpan.textContent = '占位符' // 占位符文本
// 创建 page-logo div 元素
const pageLogo = document.createElement('div')
pageLogo.className = 'page-logo'
pageLogo.textContent = 'PAGE'
// 将 span 和 page-logo 添加到 header 中
header.appendChild(pageSpan)
header.appendChild(pageLogo)
wrapper.appendChild(header)
// 创建 content 元素并添加到 wrapper 中
const content = document.createElement('div')
content.className = 'content'
wrapper.appendChild(content)
// 将新的 wrapper 盒子添加到 container 中
container.appendChild(wrapper)
wrappers.push(pageSpan) // 存储 pageSpan 元素
totalHeight = 0 // 重置当前高度
}
// 将子元素添加到 content 中
wrapper.querySelector('.content').appendChild(child)
totalHeight += childHeight
})
// 更新 pageSpan 的文本
wrappers.forEach((pageSpan, index) =>
{
pageSpan.textContent = `当前处于${index + 1 < 10 ? '0' + (index + 1) : index + 1}页 / 共${wrappers.length}页`
})
}
}
</script>
对dom进行动态分页,类似pdf预览的效果
于 2024-08-20 11:34:27 首次发布