如何动态添加页面 | 一页上的多页

Question

有没有办法动态地将多个“页面”（它们可以只是divs ）包含在一个包装器中？ 例如，假设我有一个带有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>

我希望它是动态的，以便用户可以随心所欲地输入。

我准备了一个简单的代码和盒子，里面有我的用例的基本代码。

谢谢！

Answer 1

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

1. 适合您的固定 div 的字符数量的正确计数：

aproxlength应包含固定 div 可以容纳的近似字符数。 您可以在此处根据您在浏览器上的体验输入一个近似数字，但这并不通用。

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

2. 拆分文本的正确方法：

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

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

    <div v-for="page in pagesc" :key="page" class="page">
      <span>
        <strong>Page 1</strong>
      </span>
      <div class="editor-area">{{text.slice((page-1)*aproxlength,page*aproxlength)}}</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>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      pages: 1,
      aproxlength: 330,
      text:
        "Lorem Ipsum is simply simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic."
    };
  },
  computed: {
    pagesc() {
      return Math.floor(this.text.length/this.aproxlength)+1
    }
  }
};
</script>