对dom进行动态分页，类似pdf预览的效果

<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>