Javascript 如何动态添加页面|在一个页面上添加多个页面

有没有办法在一个包装器中动态地包含多个“页面”（它们可以只是

div

）呢？例如，假设我有一个带有

textarea

的网站供用户输入信息。然后我想在一个具有固定宽度和高度的div中显示该信息。每当文本的高度超过显示它的div的高度时，我想动态地添加另一个div来显示文本的其余部分。比如说：

<div id="app">
  <div style="display: flex; flex-direction: column;">
    <span>
      <strong>Add text:</strong>
    </span>
    <textarea v-model="text" id="textarea" name="textarea" rows="6" cols="50" />
  </div>

  <div v-for="page in pages" :key="page" class="page">
    <span>
      <strong>Page 1</strong>
    </span>
    <div class="editor-area">{{text}}</div>

    <!-- So ideally, when the 'text height' exceeds the height of the div,
    I would like to add a 'second page'. The text that 'overflows' the first 
    page, should be added to the second page.-->

  </div>
</div>

添加文本：
第1页
{{text}}

我希望它是动态的，这样用户就可以随心所欲地键入内容

我为我的用例准备了一个简单的代码

---

谢谢

这里有一个糟糕的实现需要处理，它有两个问题需要解决：

适合固定div的字符数的正确计数：

aproxlength

应包含固定div可容纳的近似字符数。您可以在这里输入您在浏览器上体验到的近似数字，但这不是通用的

准确地解决这个问题并不是那么简单，因为它会在浏览器和图形单元之间发生变化。正确的方法是重新创建一个隐藏的div并填充它，直到它溢出，然后您将为每个客户机获得正确的

aproxlength

的精确答案

拆分文本的正确方法：

不要像我那样分割文本，因为它会疯狂地分割文本。您必须在前面的空格或点上拆分它

添加文本：
第1页
{{text.slice（（第1页）*aproxlength，第*页aproxlength）}
从“/components/HelloWorld”导入HelloWorld；
导出默认值{
名称：“应用程序”，
组成部分：{
你好世界
},
数据（）{
返回{
页码：1，
近似长度：330，
正文：
“Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是印刷行业的标准虚拟文本，当时一家不知名的印刷商拿起一个打印工具，争先恐后地将其制成一本字体样本书。它不仅存活了五个世纪，而且还跨越到了电子版。”
};
},
计算：{
pagesc（）{
返回Math.floor（this.text.length/this.aproxlength）+1
}
}
};