Vue 배럴 레이아웃 구현 방법(코드 포함)

이 글의 내용은 Vue 배럴 레이아웃(코드 포함)의 구현 방법에 관한 것입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

회사에서는 최근 리팩토링을 진행하여 Vue 프레임워크를 사용하고 있습니다. 브랜드 레이아웃의 경우 브랜드의 문자 길이가 일관되지 않기 때문에 각 브랜드 라벨의 길이가 다릅니다. 다중 라인 레이아웃은 각 라인의 브랜드 레이아웃을 고르지 않게 만들어 외관에 심각한 영향을 미칩니다. 그래서 이 배럴 레이아웃 플러그인이 있습니다.

배럴 레이아웃 구현은 다음과 같습니다.

1. 먼저 채울 내용을 정렬하고 각 행의 요소를 필터링합니다.

2. 그런 다음 각 요소 행을 다듬어 아름답게 정렬하세요.

단계별

1. 필요에 따라 각 행의 요소를 선택합니다

먼저 필요한 요소와 대상 컨테이너의 너비를 가져옵니다.

Vue 구성 요소 컨테이너:

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

둘째, 컨테이너와 컨테이너 너비

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

3개를 가져와야 합니다. 그런 다음 요소를 반복하고 다양한 요소의 너비에 따라 그룹화합니다.

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

            }

        })

넷째, 다음 단계는 각 그룹의 요소를 합리적으로 할당하는 것입니다.

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

각 요소에 남는 너비를 고르게 분배하기 위해 균등 분배 방식을 사용합니다. 예를 들어 행의 모든 ​​요소가 800px을 차지하고 8개의 요소가 있는 경우 행의 전체 길이는 960px입니다. 그런 다음 각 행에 추가된 너비는 (960-800)/8=16이고 각 요소의 너비는 16px만큼 증가합니다.

js가 요소 너비를 가져올 때 정확성 문제가 있으므로 주목할 가치가 있으므로 필요합니다. 하나를 미리 설정하려면 픽셀이 버퍼링됩니다.

내 코드 주소: Github: vue-barrel npm: vue-barrel

위 내용은 Vue 배럴 레이아웃 구현 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!