Implementierungsmethode des Vue-Barrel-Layouts (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode des Vue-Barrel-Layouts (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Das Unternehmen hat kürzlich ein Refactoring durchgeführt und verwendet das Vue-Framework. Wenn es um das Layout einer Marke geht, ist jedes Markenetikett unterschiedlich lang, da die Zeichenlängen der Marken unterschiedlich sind. Das mehrzeilige Layout führt dazu, dass das Markenlayout jeder Zeile ungleichmäßig ist, was das Erscheinungsbild erheblich beeinträchtigt. Es gibt also dieses Barrel-Layout-Plug-in.

Die Implementierung des Fasslayouts ist wie folgt:

1. Sortieren Sie zunächst den zu füllenden Inhalt und filtern Sie die Elemente in jeder Zeile heraus.

2. Schneiden Sie dann jede Reihe von Elementen zu, damit sie schön ausgerichtet sind.

Schritt für Schritt

1. Wählen Sie die Elemente jeder Reihe entsprechend Ihren Bedürfnissen aus

Besorgen Sie sich zunächst die Elemente, die wir benötigen, und die Breite unserer Zielcontainer.

Vue-Komponentencontainer:

<template>
  <div ref="barrel">
      <slot></slot>
  </div>
</template>

2. Außerdem müssen wir den Container und die Containerbreite ermitteln

this.barrelBox = this.$refs.barrel;
this.barrelWidth = this.barrelBox.offsetWidth;

Dann Schleife unsere Elemente, gruppiert nach der Breite verschiedener Elemente.

ps: Wenn wir die Breite eines Elements ermitteln, müssen wir zwischen Boxmodellen unterscheiden.

Array.prototype.forEach.call(items, (item) => {

            paddingRight = 0;

            paddingLeft = 0;

            marginLeft = parseInt(window.getComputedStyle(item, "").getPropertyValue('margin-left'));

            marginRight = parseInt(window.getComputedStyle(item, "").getPropertyValue('margin-right'));

            let boxSizing = window.getComputedStyle(item, "").getPropertyValue('box-sizing');

            if (boxSizing !== 'border-box') {

                paddingRight = parseInt(window.getComputedStyle(item, "").getPropertyValue('padding-right'));

                paddingLeft = parseInt(window.getComputedStyle(item, "").getPropertyValue('padding-left'));

            }

            widths = item.offsetWidth + marginLeft + marginRight + 1;

            item.realWidth = item.offsetWidth - paddingLeft - paddingRight + 1;

            let tempWidth = rowWidth + widths;

            if (tempWidth > barrelWidth) {

                dealWidth(rowList, rowWidth, barrelWidth);

                rowList = [item];

                rowWidth = widths;

            } else {
                rowWidth = tempWidth;

                rowList.push(item);

            }

        })

Viertens besteht der nächste Schritt darin, die Elemente jeder Gruppe sinnvoll zuzuordnen.

const dealWidth = (items, width, maxWidth) => {
let remain = maxWidth - width;
let num = items.length;
let remains = remain % num;
let residue = Math.floor(remain / num);
items.forEach((item, index) => {
    if (index === num - 1) {
        item.style.width = item.realWidth + residue + remains + 'px';
    } else {
        item.style.width = item.realWidth + residue + 'px';
    }
})
}

Ich verwende eine gleichmäßige Verteilungsmethode, um die überschüssige Breite gleichmäßig auf jedes Element zu verteilen. Wenn beispielsweise alle Elemente in einer Zeile 800 Pixel belegen und es 8 Elemente gibt, beträgt die Gesamtlänge der Zeile 960 Pixel. Dann beträgt die erhöhte Breite jeder Zeile (960-800)/8=16, und die Breite jedes Elements erhöht sich um 16 Pixel.

Es ist zu beachten, dass js beim Ermitteln der Elementbreite Probleme mit der Genauigkeit haben wird. Daher ist es notwendig, ein Pixel für die Pufferung voreinzustellen.

Meine Codeadresse: Github:vue-barrel; npm: vue-barrel

Das obige ist der detaillierte Inhalt vonImplementierungsmethode des Vue-Barrel-Layouts (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!