Méthode d'implémentation de la disposition du tonneau Vue (avec code)

Le contenu de cet article concerne la méthode d'implémentation de la disposition des barillets Vue (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La société a récemment refactorisé et utilise le framework Vue. En ce qui concerne la présentation d'une marque, parce que les longueurs de caractères des marques sont incohérentes, chaque étiquette de marque a des longueurs différentes. La disposition multiligne entraînera une disposition inégale de la marque de chaque ligne, ce qui affectera sérieusement l'apparence. Il y a donc ce plug-in de disposition en barillet.

La mise en œuvre de la disposition des barils est la suivante :

1. Tout d'abord, triez le contenu à remplir et filtrez les éléments dans chaque ligne.

2. Coupez ensuite chaque rangée d'éléments pour les rendre joliment alignés.

Pas à pas

1. Sélectionnez les éléments de chaque rangée en fonction de vos besoins

Obtenez d'abord les éléments dont nous avons besoin et la largeur de notre conteneur cible.

Conteneur du composant Vue :

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

2 De plus, nous devons obtenir le conteneur et la largeur du conteneur

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

. 3. Ensuite, nous parcourons nos éléments et les regroupons en fonction de leur largeur.

ps : Lors de l'obtention de la largeur d'un élément, il faut distinguer les modèles de boîtes.

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

            }

        })

Quatrièmement, la prochaine étape consiste à répartir raisonnablement les éléments de chaque groupe.

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';
    }
})
}

J'utilise une méthode de répartition uniforme pour répartir uniformément l'excédent de largeur sur chaque élément. Par exemple, si tous les éléments d’une ligne occupent 800 px et qu’il y a 8 éléments, la longueur totale de la ligne est de 960 px. Ensuite, la largeur augmentée de chaque ligne est de (960-800)/8=16, et la largeur de chaque élément augmente de 16px

Il convient de noter que js aura des problèmes de précision lors de l'obtention de la largeur de l'élément, il est donc nécessaire de prérégler un pixel pour la mise en mémoire tampon.

Mon adresse de code : Github :vue-barrel; npm: vue-barrel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!