Qual è l'approccio migliore per calcolare la distanza tra i DOM elementi in Vuejs?

voti
11

Sto costruendo uno strumento per generare file PDF a partire dai dati, e ho bisogno di costruire in due formati: 105 millimetri * 148 millimetri e 105 millimetri * 210 millimetri. Così ho preso il mio intero documento e ora è il momento per me di inserire interruzioni di pagina. Lo faccio con una semplice classe:

.page-break { display: block; page-break-before: always; }

Ora devo inserire questa classe nel mio ciclo v-per. Quindi un idea di base è quella di calcolare un intervallo, come ogni l'indice è un multiplo di 6, inserisco uno. Ma non è il modo migliore per farlo, voglio inserire una pausa quando il contenuto è al di sopra 90 millimetri.

Per fare questo, ho voluto calcolare la distanza tra 2 pause e inserire una nuova, se la distanza è nei pressi di 90 millimetri. Ma, non riesco a trovare un modo per accedere ai miei elementi DOM dinamici ...

Quindi la domanda è semplice: come calcolare questa distanza? O se c'è un modo migliore per raggiungere il mio obiettivo, cosa posso migliorare?

È pubblicato 06/12/2016 alle 09:18
fonte dall'utente
In altre lingue...                            


2 risposte

voti
3

Credo che si sta aggiungendo un div / componenti in ciascuna v-fored è possibile aggiungere un ID univoco a div. Ora sotto i metodi possono dare altezza di un div in px, e si avrà un modo per convertire pxa mm.

Se si utilizza jQuery , si può fare

$('#nthDiv').height();

In caso contrario, si può fare seguente:

altezza interna :

document.getElementById('#nthDiv').clientHeight;

altezza esterna :

document.getElementById('#nthDiv').offsetHeight; 

se si dispone di codice seguente:

<div v-for="(item, index) in items" :class="{'page-break': isBreakNeeded(index)}" :id="index + 'thDiv'">
   ///Your code
</div>

È necessario aggiungere seguente metodo:

isBreakNeeded (index) {       
   var height = 0
   do {
      index -= 1;
      height += document.getElementById('#' + index + 'thDiv').offsetHeight; 
      } while (index >= 0 || pageBreakAdded[index] == true)
      if(height > threshold){
         pageBreakAdded[index] = true
         return  true
      }
      else{
         return  false
      }
}

È necessario aggiungere un seguito hash e l'attributo di dati del vostro elemento vue, che si terrà al corrente pari ad un'interruzione di pagina quello che gli indici sono stati aggiunti:

pageBreakAdded: {}
Risposto il 19/12/2016 a 14:00
fonte dall'utente

voti
2

Così, ho provato questo approccio:

  1. inserire un page-breakmodello dentro la mia loop ( div v-for each data text element)
  2. selezionare tutto il page-breakdopo il rendering
  3. calcolare utilizzando getBoundingClientRect()
    1. ciclo attraverso la selezione
    2. ottenere la distanza tra la pausa corrente e quello successivo
    3. se è al di fuori di un intervallo accettabile, lo elimina dal DOM.

Questo metodo funziona ma è molto brutto, è molto difficile da calcolare una buona gamma, ed è super costoso! Con un piccolo set di dati è ok, ma con un intero libro, è troppo lungo ...

E questo è un primo tentativo di farlo (con Vuetemplate)

<template>
  <div class="content">
    <div class="pages">
      <div class="page-footer">
        <div class="page-break"></div>
      </div>

      <div class="dynamic">
        <div v-for="(entry, index) in conv" class="row">
          <div v-if="entry.msgs[0].value === 'break'">
            <span class="date">{{entry.msgs[0].metadate}}</span>
          </div>

          <div v-else>
            <span class="author">` entry`.`user `</span>
            <span class="hour">{{ entry.msgs[0].metahour }}</span>
            <div class="phrases">
              <span v-for="msg in entry.msgs">
                ` msg`.`value `
              </span>
            </div>
          </div>

          <div class="page-footer" :data-base="index">
            <span class="page-number" :data-base="index">{{ pageNumberFor(index) }}</span>
            <div class="page-break"></div>
          </div>
        </div>
      </div>

      <div class="page-footer" data-base="end">
        <span class="page-number" data-base="end">{{ pageNumberFor('end') }}</span>
        <div class="page-break"></div>
      </div>
    </div>
  </div>
</template>

<script>

import und from 'underscore'

export default {
  name: "Data",

  data () {
    return {
      conv: null,
      cleaned: false,
      pageNumbers: {}
    }
  },

  computed: {
    mmScale: () => 0.264583333,
    heightBreak: () => 210
  },

  mounted () {
    this.$http.get('static/data_sorted_backup.json').then(
    // this.$http.get('static/data_sorted.json').then(
      (response) => {
        this.conv = this.groupBy(response.data)
      },
      (response) => {
        console.log('error');
      }
    )


  },

  updated () {
    console.log('updated');
    if(!this.cleaned) this.cleanPageBreak()
  },

  methods: {
    groupBy (json) {
      let result = []
      result.push(json[0])

      let punc = new RegExp(/[\?\.\!\;\(\)]?$/, 'ig')

      for (var i = 1; i < json.length; i++) {
        let val = json[i].msgs[0].value
        val = val.charAt(0).toUpperCase() + val.slice(1);
        if( punc.test(val) === false ) val += '.'
        json[i].msgs[0].value = val

        let len = result[result.length -1].msgs.length
        // if it's not the same day

        let origin = result[result.length -1].msgs[len - 1].metadate
        let new_entry = json[i].msgs[0].metadate
        // console.log(i, origin, new_entry);
        if( origin !== new_entry ){
          result.push({
            msgs: [{
              value:"break",
              metadate: json[i].msgs[0].metadate
            }]
          })
          i--
          continue;
        }

        // if the previous author is the same
        if(result[result.length -1].user === json[i].user){
          result[result.length -1].msgs.push({
            value: json[i].msgs[0].value,
            metadate: json[i].msgs[0].metadate,
            metahour: json[i].msgs[0].metahour
          })

        }else{
          result.push(json[i])
        }
      }

      return result
    },

    cleanPageBreak () {
      console.log('cleanPageBreak');
      let breaks = this.$el.querySelectorAll('.page-footer')
      let distance
      let enough
      let previousTop = breaks[0].getBoundingClientRect().top

      let seuil = this.heightBreak * 0.85

      console.log(breaks.length, seuil);

      for (let i = 1; i < breaks.length; ++i) {
        console.log(i);
        distance = (breaks[i].getBoundingClientRect().top - previousTop) * this.mmScale

        enough = distance < this.heightBreak && distance >= seuil


        if (enough) {
          previousTop = breaks[i].getBoundingClientRect().top
        } else if(i != breaks.length -1) {
          breaks[i].remove()
        }
      }
      this.cleaned = true
      this.mapNumbers()
    },

    mapNumbers () {
      console.log('mapNumbers');
      let numbers = Array.from(this.$el.querySelectorAll('.page-number'))

      numbers.map( (elem, index) => {
        this.pageNumbers[elem.dataset.base] = {}
        this.pageNumbers[elem.dataset.base].index = index + 1
      })
    },

    pageNumberFor (index) {
      if(this.pageNumbers[index]) return this.pageNumbers[index].index
      return 0
    }
  }
}
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Abel|Abhaya+Libre');


.page-footer{
  position: relative;
  margin: 12mm 0;
  // border: 1px dotted black;

  .page-break   {
    display: block;
    page-break-before: always;
  }

  .page-number {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: -28mm;
  }
}

.content {
  padding: 0 16mm 0 10mm;
  font-family: 'Abhaya Libre', serif;

  .pages{
    position: relative;
  }
}
.row {
  margin: 0;
  font-size: 0;

  span{
    font-size: 13px;
  }
  span:first-letter {
    text-transform: uppercase;
  }

  .date, .hour {
    font-family: 'Abel', sans-serif;
  }
  .date {
    font-size: 15px;
    text-align: center;
    display: block;
    padding-top: 10mm;
    padding-bottom: 2mm;
  }
  .author{
    display: block;
    text-transform: uppercase;
    text-align: center;
  }
  .hour {
    margin-bottom: 3mm;
    margin-top: -2px;
    display: block;
    text-align: center;
    font-size: 9px;
  }
  .phrases{
    text-indent:5mm;
  }
}

.row + .row {
  margin-top: 5mm;
}
</style>
Risposto il 22/12/2016 a 15:02
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more