Vueバレルレイアウトの実装方法（コード付き）

この記事は、Vue バレル レイアウトの実装方法 (コード付き) に関するものです。必要な方は参考にしていただければ幸いです。

同社は最近リファクタリングを行っており、Vue フレームワークを使用しています。ブランドのレイアウトに関しては、各ブランドの文字の長さが統一されていないため、各ブランドラベルの長さが異なります。複数行のレイアウトは、各行のブランド レイアウトが不均一になり、外観に重大な影響を与えます。そこでこのバレルレイアウトプラグインがあります。

バレル レイアウトの実装は次のとおりです:

1. まず、入力するコンテンツを並べ替え、各行の要素をフィルターします。

2. 次に、要素の各行をトリミングして、美しく配置します。

ステップバイステップ

1. 必要に応じて各行の要素を選択します

まず、必要な要素とターゲットコンテナの幅を取得します。 。

Vue コンポーネント コンテナ:

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

2 番目に、コンテナとコンテナの幅

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

Three を取得し、要素をループする必要があります。 、さまざまな要素の幅に応じてグループ化されます。

ps: 要素の幅を取得するときは、ボックス モデルを区別する必要があります。

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

            }

        })

4 番目のステップは、各グループの要素を合理的に割り当てることです。

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

余剰幅を各要素に均等に配分する均等配分方法を使用します。たとえば、行内のすべての要素が 800 ピクセルを占め、要素が 8 個ある場合、行の合計の長さは 960 ピクセルになります。この場合、各行の追加幅は (960-800)/8=16 となり、各要素の幅は 16px ずつ増加します。

js では要素の幅を取得するときに精度の問題が発生することに注意してください。バッファリング用に 1 つのピクセルをプリセットします。

私のコードアドレス: Github:vue-barrel;npm: vue-barrel

以上がVueバレルレイアウトの実装方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。