Vue의 Pagination 구성 요소의 예

재사용 가능한 VUE 페이징 구성 요소를 구현하려면 다음과 같은 주요 포인트를 명확히해야합니다. 1. 총 라인 수, 페이지 당 라인 수 및 현재 페이지 번호를 포함한 소품을 정의합니다. 2. 총 페이지 수를 계산합니다. 3. 표시된 페이지 번호 배열을 동적으로 생성합니다. 4. 페이지 번호를 처리하고 이벤트를 클릭하고 부모 구성 요소로 전달하십시오. 5. 스타일과 상호 작용 세부 사항을 추가하십시오. 소품을 통해 데이터를 수신하고 기본값을 설정하고, 계산 된 속성을 사용하여 총 페이지 수를 계산하고, 방법을 사용하여 현재 표시된 페이지 번호 배열을 생성하고, 템플릿에서 렌더링 버튼을 생성하고, 클릭 클릭 이벤트를 바인드하여 현재 페이지 이벤트를 트리거하고, 현재 페이지 번호를 통해 이벤트를 듣고, 현재 페이지 번호를 통해 CSS를 통해 현재 페이지 번호를 강조하여 사용자 경험을 향상시킵니다.

VUE를 사용하여 백엔드 관리 시스템 또는 컨텐츠 디스플레이 플랫폼과 같은 페이징 기능이 필요한 프로젝트를 개발하는 경우 재사용 가능한 페이징 구성 요소를 구현해야합니다. 여기서 우리는 몇 가지 핵심 요점에 대해 간단히 이야기하고 Vue Pagination 구성 요소의 기본이지만 실용적인 예를 제공합니다.

기본 구조 및 데이터 준비

구성 요소를 작성하기 전에 필요한 데이터를 명확히하십시오.

• 현재 페이지 번호 (현재 페이지)
• TOLITEMS
• 페이지 당 표시되는 조각 수 (Pagesize)
• 선택 사항 : 표시 할 최대 페이지 번호 (예 : 표시 할 최대 5 페이지 번호)

이를 소품으로 또는 상위 구성 요소로 전달할 수 있습니다. 예를 들어:

 소품 : {
  총 : {유형 : 숫자, 필수 : true},
  pagesize : {type : number, default : 10},
  CurrentPage : {유형 : 번호, 기본값 : 1}
}

그런 다음 다음을 기반으로 총 페이지 수를 계산하십시오.

 계산 : {
  TotalPages () {
    Return Math.ceil (this.total / this.pagesize)
  }
}

페이지 번호 렌더링 버튼

일반적인 관행은 현재 페이지의 왼쪽과 오른쪽에 하나 또는 두 페이지 숫자 만 표시하여 너무 많은 버튼을 피하는 것입니다. 예를 들어, 현재 5 페이지에있는 경우 최대 5 개의 버튼이 표시되면 3, 4, 5, 6 및 7이 표시되어야합니다.

한 가지 방법으로 표시 할 페이지 번호를 생성 할 수 있습니다.

 방법 : {
  getPagenumbers () {
    const maxbuttons = 5
    const pages = []
    Const Half = Math.floor (Maxbuttons / 2)

    start = math.max (1, this.currentpage- 절반)
    end = math.min (this.totalpages, start maxbuttons -1)

    // 끝 근처에있는 경우 시작점을 앞으로 조정합니다.
      start = math.max (1, 끝 -Maxbuttons 1)
    }

    for (i = start; i <= end; i) {
      pages.push (i)
    }

    반환 페이지
  }
}

이렇게하면 템플릿에서 동적 페이지 번호 버튼을 렌더링 할 수 있습니다.

페이지 번호 클릭 및 이벤트 배송을 처리합니다

사용자가 페이지 번호를 클릭하면 $emit 통해 새 페이지 번호 값을 부모 구성 요소에 전달하고 데이터 업데이트를 처리해야합니다.

 <div class = "Pagination">
  <button @click = "$ emit ( &#39;update : current-page&#39;, 1)": disabled = "currentpage === 1"> home </button>
  <버튼 v-for = "pagenumbers의 페이지" 
          : key = "page"
          @click = "$ emit ( &#39;update : current-page&#39;, page)" "
          : class = "{active : currentPage === page}">
    {{page}}
  </버튼>
  <button @click = "$ emit ( &#39;update : current-page&#39;, totalpages)": disabled = "currentPage === TotalPages"> 마지막 페이지 </button>
</div>

부모 구성 요소 에서이 페이징 구성 요소를 사용하는 경우 다음과 같이 바인딩 할 수 있습니다.

 <페이지 매김 
  : Total = "100" 
  : current-page = "currentpage" 
  @update : current-page = "currentpage = $ event"
/>

스타일 및 상호 작용 세부 사항

• 현재 .active 에 하이라이트 스타일을 추가하는 것이 매우 일반적입니다.
• 유효하지 않은 작업을 피하기 위해 "이전 페이지"또는 "다음 페이지"버튼을 추가 할 수도 있습니다.
• 페이지 번호가 너무 많으면 타원 (…)을 추가하여 중간에 숨겨진 페이지 번호가 있음을 나타낼 수도 있지만 조금 더 복잡합니다.
• 실수로 터치하지 않도록 버튼 수를 단순화하는 것이 좋습니다.

기본적으로 그게 다야. 간단한 페이징 구성 요소는 너무 복잡 할 필요는 없지만 명확한 논리와 합리적인 상호 작용을 갖는 것은 매우 실용적입니다.

위 내용은 Vue의 Pagination 구성 요소의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!