[Vuejs]-How to dynamically add pages | multiple pages on one page

by

0👍

Here you have a poor implementation to work on, it has two problems that you’ll still have to solve:

  1. A proper count of the amount of characters that fit your fixed div:

aproxlength should contain the approximated number of characters your fixed div can fit. You can enter here an approximated number from your experience on your browser, but that’s not universal.

Solving accurately this problem is not so trivial as it will change between browsers and graphic units. The proper way to go seams to recreate a hidden div and fill it until it overflows, then you’ll have a precise answer to the proper aproxlength for each client. Related implementation on pure javascript

  1. A proper way to split text:

Do not split the text as I did, because it will split the text madly. You have to split it on the prior whitespace, or point.

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

Leave a comment