[뷰] Vue 기술 스티커

우선, 마지막 렌더링 물결입니다:

우선, 페이저 컴포넌트(이하 "페이저 컴포넌트"라고 함)가 일반적으로 소유하는 요소는 다음과 같습니다:

• 이전

• 1페이지

• 가운데 표시된 페이지 번호

• 마지막 페이지

• 다음

  
  

초기화에 필요한 구성은 다음과 같습니다:

• 토탈페이지

• initPage

• showPrev (이전 페이지를 보여줄까)

• showNext (다음 페이지를 보여줄지 여부)

• showItems (중간 몇 페이지)

• showJump (어느 페이지로 이동하는지 여부)

  
  

이 음들은 Vue의 소품을 통해 수신할 수 있습니다.

또한, 페이저 컴포넌트 자체에는 현재 페이지를 기록하는 currentPage가 필요하고, 페이지 배열은 중앙에 표시되는 페이지 번호를 포함하고, jumpPage는 점프 페이지 번호 입력을 묶어야 합니다.

해당 코드는 다음과 같습니다:

• 
  
  <template>
  
  
• 
  
      <div class="pager-wrapper" v-if="totalPage > 0">
  
  
• 
  
          <div class="pager-pages">
  
  
• 
  
              <a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" 이전 페이지 ></a>
  
  
• 
  
              <a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
  
  
• 
  
              <강한 v-쇼="pages[0] > 2">...</strong>
  
  
• 
  
              <a v-for="페이지 속 페이지" :class="{active: currentPage == page ? true : false}" @click="go(page)">{{page}}</a>
  
  
• 
  
              <강한 v-show="pages[pages.length-1] < totalPage - 1">...</strong>
  
  
• 
  
              <a v-if="totalPage > 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{{totalPage}}</a>
  
  
• 
  
              <a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)" > 다음 페이지</a>
  
  
• 
  
          </div>
  
  
• 
  
          <div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
  
  
• 
  
              <span>Total <em class="jump-total">{{totalPage}}</em> 페이지, 점프해</span>
  
  
• 
  
              <입력 유형="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
  
  
• 
  
              <span>페이지</span>
  
  
• 
  
              <a @click="go(jumpPage)" > 결정</a>됨
  
  
• 
  
          </div>
  
  
• 
  
      </div>
  
  
• 
  
  </template>
  
  
• 
  
  <script>
  
  
• 
  
    내보내기 기본값 {
  
  
• 
  
          소품: {
  
  
• 
  
              totalPage: { // 총 페이지 수
  
  
• 
  
                  유형: 번호,
  
  
• 
  
                  기본값: 1,
  
  
• 
  
                  필수: 참
  
  
• 
  
              },
  
  
• 
  
              showItems: { // 표시된 페이지 수, 예: 1 ... 34[5]67 ... 10
  
  
• 
  
                  유형: 번호,
  
  
• 
  
                  기본값: 5
  
  
• 
  
              },
  
  
• 
  
              showPrev: { // "이전 사용자" 표시 여부
  
  
• 
  
                  유형: 불리언,
  
  
• 
  
                  기본값: 참
  
  
• 
  
              },
  
  
• 
  
              showNext: { // "Next" 표시 여부
  
  
• 
  
                  유형: 불리언,
  
  
• 
  
                  기본값: 참
  
  
• 
  
              },
  
  
• 
  
              showJump: { // "Jump"를 보여줄지?
  
  
• 
  
                  유형: 불리언,
  
  
• 
  
                  기본값: 참
  
  
• 
  
              },
  
  
• 
  
              initPage: {
  
  
• 
  
                  유형: 번호,
  
  
• 
  
                  기본값: 1
  
  
• 
  
              }
  
  
• 
  
          },
  
  
• 
  
          데이터 () {
  
  
• 
  
              반환 {
  
  
• 
  
                  currentPage: 0,
  
  
• 
  
                  페이지: [],
  
  
• 
  
                  jumpPage: 0,
  
  
• 
  
              }
  
  
• 
  
          },
  
  
• 
  
          created() {// 초기화 시 currentPage 할당
  
  
• 
  
              this.currentPage = this.initPage
  
  
• 
  
          }
  
  
• 
  
          방법: {
  
  
• 
  
              고 (페이지) {
  
  
• 
  
                  if(페이지 < 1) {
  
  
• 
  
                      페이지 = 1
  
  
• 
  
                  }
  
  
• 
  
                  if(page > this.totalPage) {
  
  
• 
  
                      페이지 = this.totalPage
  
  
• 
  
                  }
  
  
• 
  
                  if(page === this.currentPage) {
  
  
• 
  
                      귀환
  
  
• 
  
                  }
  
  
• 
  
                  this.currentPage = parseInt(page,10)
  
  
• 
  
                  this.$emit('페이지 가기',{
  
  
• 
  
                      페이지: this.currentPage
  
  
• 
  
                  })
  
  
• 
  
              }
  
  
• 
  
          },
  
  
• 
  
          시청: {
  
  
• 
  
              currentPage (newVal) {
  
  
• 
  
                  this.jumpPage = newVal
  
  
• 
  
              },
  
  
• 
  
              initPage (newVal) {
  
  
• 
  
                  if(this.currentPage !== newVal) {
  
  
• 
  
                      this.currentPage = newVal
  
  
• 
  
                  }
  
  
• 
  
              }
  
  
• 
  
          }
  
  
• 
  
      }
  
  
• 
  
  </script>
  
  
  

다음 단계는 페이지 배열의 값을 얻는 방법입니다. 페이지는 항상 현재 페이지와 구성에서 표시해야 할 showItems와 밀접하게 관련되어 있으므로, 계산된 속성으로 페이지를 변경할 수 있습니다:

• 
  
  computed: {
  
  
• 
  
      페이지 () {
  
  
• 
  
          페이지 번호 배열은 시작과 끝 페이지 번호를 기반으로 얻습니다
  
  
• 
  
          let getPages = (start, end) => {
  
  
• 
  
              if(start <= 1 || 시작 > 끝 || 시작 >= this.totalPage) {
  
  
• 
  
                  시작 = 2
  
  
• 
  
              }
  
  
• 
  
              if(end >= this.totalPage || 끝 < 시작 || 끝 <= 1) {
  
  
• 
  
                  끝 = this.total페이지 - 1
  
  
• 
  
              }
  
  
• 
  
              arr = []
  
  
• 
  
              for(i = 시작; I <= 끝; i++) {
  
  
• 
  
                  arr.push(i)
  
  
• 
  
              }
  
  
• 
  
              돌아오세요
  
  
• 
  
          }
  
  
• 
  
          let counts = this.showItems
  
  
• 
  
          if(this.totalPage < counts + 2) {
  
  
• 
  
              get page(2, this.totalPage) 반환
  
  
• 
  
          } 그렇지 않으면 {
  
  
• 
  
              if(this.currentPage <= Math.ceil(counts/2)) {
  
  
• 
  
                  반환 getPages(2,개수)
  
  
• 
  
              } 그렇지 않으면 (this.currentPage >= this.totalPage - Math.floor(counts/2)) {
  
  
• 
  
                  getPages(this.totalPage + 1 - 수, this.totalPage - 1)
  
  
• 
  
              } 그렇지 않으면 {
  
  
• 
  
                  반 = Math.ceil(counts/2) - 1이라고 하자.
  
  
• 
  
                  끝 = this.current페이지 + half
  
  
• 
  
                  if(counts % 2 === 0) {
  
  
• 
  
                      끝++
  
  
• 
  
                  }
  
  
• 
  
                  getPages(this.currentPage - 절반, 끝)
  
  
• 
  
              }
  
  
• 
  
          }
  
  
• 
  
      }
  
  
• 
  
  }
  
  
  

이 시점에서 일반적인 페이지 넘기기 구성 요소가 기본적으로 구현됩니다(스타일은 자체적으로 커스터마이즈할 수 있습니다). 하지만 많은 경우(특히 일부 관리 배경 면에서) Vue-router와 결합해 SPA를 만들 때는 보통 다음과 같은 요구사항이 있습니다:

특정 목록의 페이지로 넘기면 항목을 클릭해 편집 페이지로 이동하고, 편집 후에는 바로 그 페이지로 돌아가서 바로 이동할 수 있어야 합니다.

위의 페이저 컴포넌트만 사용한다면 이 요구사항을 구현하기가 그리 편리하지 않습니다. 어떤 사람들은 vuex를 결합해도 괜찮다고 말할 수 있지만, 이 경우에는 상태 내에서 페이지 번호를 기록하기 전에 기록해야 합니다. 페이지 플립 리스트가 많다면 여러 페이지를 기록하는 것은 분명히 우아하지 않습니다.

하지만 Vue-Router 구현의 우아함 덕분에 위의 요구사항을 쉽게 충족할 수 있습니다:
먼저, 모드가 매개변수일 때 점프가 어느 경로를 가로지는지 알아야 하므로 prop에 모드 구성을 추가합니다.

• 
  
  mode: {
  
  
• 
  
      유형: 문자열,
  
  
• 
  
      기본값: '이벤트' // '이벤트' | '쿼리' | '파람'
  
  
• 
  
  },
  
  
• 
  
  routeName: {
  
  
• 
  
      유형: 스트링
  
  
• 
  
  }
  
  
  

그 다음 실제 점핑 논리 메서드 go(page)에서 몇 가지 변경을 하세요:

• 
  
  고 (페이지) {
  
  
• 
  
      if(페이지 < 1) {
  
  
• 
  
          페이지 = 1
  
  
• 
  
      }
  
  
• 
  
      if(page > this.totalPage) {
  
  
• 
  
          페이지 = this.totalPage
  
  
• 
  
      }
  
  
• 
  
      if(page === this.currentPage) {
  
  
• 
  
          귀환
  
  
• 
  
      }
  
  
• 
  
      this.currentPage = parseInt(page,10)
  
  
• 
  
      if(this.mode == 'query') {
  
  
• 
  
          query = this.$route.query
  
  
• 
  
          query.page = this.currentPage
  
  
• 
  
          this.$router.go({query: query})
  
  
• 
  
      } 그렇지 않으면 (this.mode == 'params') {
  
  
• 
  
          params = this.$route.params
  
  
• 
  
          params.page = this.currentPage
  
  
• 
  
          this.$router.go({name: this.routeName, params: params})
  
  
• 
  
      } 그렇지 않으면 {
  
  
• 
  
          this.$emit('페이지 가기',{
  
  
• 
  
              페이지: this.currentPage
  
  
• 
  
          })
  
  
• 
  
      }
  
  
• 
  
  }
  
  
  

이것은 기본적으로 간단하고 범용적인 페이지 넘기기 구성 요소를 완성하며, 모두가 사용할 수 있도록 저장소에 보낼 수는 없습니다.
이 글에서 마침내 구현된 페이지 넘기기 구성 요소가 공개되었고, 소스 코드의 물결을 볼 수 있습니다:
Vue-simple-pager