소개

이 문서는 원래 my blog에 게시되었습니다.

사진 게시자: pexels

Vue.js은 매력적인 콘텐츠를 만들 수 있는 진보적인 JavaScript 프레임워크입니다.
사용자 인터페이스를 효율적이고 쉽게 사용할 수 있습니다.

이 게시물에서는 동적 번호를 가질 수 있는 페이지 매김 구성 요소를 만들 것입니다.
단계의!

최종 애플리케이션은 다음과 같습니다.



물론 여기에서 Github 저장소를 찾을 수 있습니다.

파블로스 이사리스 / Vue.js-페이지네이션-예제

이것은 기본 페이지 매김 구성 요소를 보여주는 간단한 Vue.js 애플리케이션입니다.

프로젝트 설정

vue cli를 사용하여 앱을 만듭니다.

npm install -g @vue/cli

다음으로 CLI를 사용하여 앱의 모든 상용구를 만듭니다.

vue create pagination-component-vue-example

초기화 부분이 성공적으로 완료되었는지 확인하기 위해,
프로젝트의 디렉토리와 앱serve으로 이동합니다.

cd pagination-component-vue-example
npm run serve

모든 것이 계획대로 진행되면 오류 메시지가 표시되지 않으며
http://localhost:8080/으로 이동하면 Vue.js 기본 페이지를 참조하세요.

Vue는 일부 초기화 명령을 실행하고 프로젝트가 생성되었습니다.

앱을 디자인할 시간입니다!

매개 변수로 사용할 페이지 매김 구성 요소를 만듭니다.

그리고 그것을 테스트하기 위해 앱 구성 요소를 사용할 것입니다.

먼저 src/components/HelloWorld.vue 를 제거하겠습니다.

우리는 src/components/PaginationComponent.vue를 생성할 것입니다.
페이지 매김 구성 요소의 논리.

이 자습서에서는 Bootstrap을 사용하여
깔끔한 방식으로 HTML 스타일을 지정하되 이 단계를 건너뛰어도 됩니다(또는 다른 HTML 라이브러리 사용).

다음을 반영하도록 변경src/App.vue:

<template>
  <div id="app">
    <pagination-component></pagination-component>
  </div>
</template>

<script>
import PaginationComponent from './components/PaginationComponent.vue'
import 'bootstrap';

export default {
  name: 'app',
  components: {
    PaginationComponent
  }
}
</script>

<style>
  @import "~bootstrap/dist/css/bootstrap.min.css";
</style>

당분간은 src/components/PaginationComponent.vue를 비우고 멍청하게 둘 수 있습니다.

<template>
   I'm an example component.         
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

페이지네이션 컴포넌트 디자인하기

이제 우리는 페이지네이션 구성요소가 무엇을 해야 하는지, 그 한계가 무엇인지에 대해 수렴해야 합니다.
그리고 우리 앱에서 어떻게 사용되어야 하는지.

내 앱에서 "역방향만 무료"전략을 사용하기로 결정했습니다.
사용자가 n번째 단계에 있으면 다음을 통해서만 이전 단계로 이동할 수 있습니다.
탐색 링크.

사용자가 앞으로 이동하려면 "다음"버튼을 클릭해야 합니다.
이것은 단계가 있는 페이지가 매겨진 양식이 있는 경우 유용할 수 있습니다.
사용자가 다음 단계로 진행하도록 허용하기 전에 일종의 유효성 검사를 수행합니다.

이러한 기능적 요구 사항을 염두에 두고 steps 배열을 구성할 수 있습니다.
앱 구성 요소 자체에서 페이지 매김 구성 요소로 전달됩니다.

따라서 다음을 반영하도록 App.vue를 변경해 보겠습니다.

<template>
  <div id="app">
    <pagination-component></pagination-component>
  </div>
</template>
<script>
import PaginationComponent from './components/PaginationComponent.vue'
import 'bootstrap';
export default {
  name: 'app',
  components: {
    PaginationComponent
  },
  data() {
    return {
      steps: [
        {
          title: 'Introduction',
          allowNext: false
        }, {
          title: 'Second',
          allowNext: false
        }, {
          title: 'Third',
          allowNext: false
        }, {
          title: 'Final',
          allowNext: false
        }
      ]
    }
  }
}
</script>

우리는 steps 배열을 구성하여 페이지 매김 구성 요소에서 다른 "페이지"를 정의합니다.allowNext 속성은 사용자가 다음 단계로 이동할 수 있도록 할지 여부를 정의할 수 있습니다.
페이지 링크.

동적 슬롯 수

다음으로 페이지 매김에서 동적 슬롯 수를 정의하는 방법을 알고 싶습니다.
원하는 만큼 많은 단계를 전달할 수 있습니다.
그 전에 다음을 반영하도록 페이지 매김 구성 요소를 다시 설계해 보겠습니다.

여기에서 볼 수 있듯이 pgination 헤더 링크를 표시하기 위해 steps prop을 사용합니다(

부트스트랩 이동 경로 항목) 및 해당 Vueslot .

동적 슬롯 생성

이제 모든 것을 하나로 묶을 때입니다!

다음을 반영하도록 업데이트App.vue:

보시다시피 동적 개수의 구성요소template를 전달하여 각
역할을 합니다.
단계의 내용. 여기서 제한은 템플릿 수가 다음과 같아야 한다는 것입니다.
data의 App.vue 섹션에서 생성한 단계의 수입니다.

사용 예

멋지죠?