Implementation method of Vue barrel layout (with code)

The content of this article is about the implementation method of Vue barrel layout (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The company has been refactoring recently and uses the Vue framework. When it comes to the layout of a brand, because the character lengths of the brands are inconsistent, each brand label is of different lengths. Multi-line layout will cause the brand layout of each line to be uneven, seriously affecting the appearance. So there is this barrel layout plug-in.

The implementation of barrel layout is as follows:

1. First, sort the content to be filled and filter out the elements in each row.

2. Then trim each row of elements to make them beautifully aligned.

Step by step

1. Select the elements of each row as needed

First get the elements we need and the width of our target container.

Vue component container:

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

Second, we need to get the container and container width

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

Three, then loop our Elements, grouped according to the width of different elements.

ps: When obtaining the width of an element, we need to distinguish the box model.

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

            }

        })

Fourth, the next step is to reasonably allocate the elements of each group.

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

I use an even distribution method to evenly distribute the excess width to each element. For example, if all elements in a row occupy 800px and there are 8 elements, the total length of the row is 960px. Then the added width of each row is (960-800)/8=16, and each element width increases by 16px;

It is worth noting that js will have accuracy problems when obtaining the element width, so it is necessary Preset one pixel for buffering.

My code address: Github:vue-barrel;npm: vue-barrel

The above is the detailed content of Implementation method of Vue barrel layout (with code). For more information, please follow other related articles on the PHP Chinese website!