Vue 구성요소 실습: 페이징 구성요소 개발

Vue 컴포넌트 실습: 페이징 컴포넌트 개발

소개

웹 애플리케이션에서 페이징 기능은 필수적인 컴포넌트입니다. 좋은 페이지 매김 구성 요소는 표현이 간단하고 명확해야 하며, 기능이 풍부하고, 통합 및 사용이 쉬워야 합니다.

이 기사에서는 Vue.js 프레임워크를 사용하여 고도로 사용자 정의 가능한 페이징 구성 요소를 개발하는 방법을 소개합니다. Vue 컴포넌트를 활용하여 개발하는 방법을 코드 예시를 통해 자세히 설명하겠습니다.

기술 스택

• Vue.js 2.x
• JavaScript(ES6)
• HTML5 및 CSS3

개발 환경

• Node.js v8.9.3
• npm v5.5.1
• Vue.js v2 .5.2

Pagination 컴포넌트 요구 사항

• props를 통해 총 페이지 수(total)와 현재 페이지 수(current)를 수신합니다
• 표시되는 최대 페이지 수(maxShown)를 구성할 수 있습니다
• 할 수 있습니다 버튼에 표시되는 텍스트(prevText 및 nextText)와 버튼 스타일을 구성합니다
• 페이지 번호를 클릭하면 해당 페이지로 전환됩니다
• 현재 페이지 번호가 강조 표시됩니다
• 현재 페이지에 이전 페이지가 없을 때 클릭 이전 페이지 버튼의 이벤트는 무시됩니다
• 현재 페이지에 다음 페이지가 없으면 다음 페이지 버튼의 클릭 이벤트를 무시합니다

디자인 아이디어 및 코드 구현

필요에 따라 페이징 구성 요소를 분할합니다. 구현을 위해 여러 개의 작은 구성요소로 나눕니다. 다음과 같은 3개의 작은 구성 요소를 만들어야 합니다.

1. Pagination.vue

기본 페이징 구성 요소는 페이지 매김 데이터 및 논리 처리를 담당합니다. 페이징 정보를 하위 구성 요소에 전달하고 하위 구성 요소 이벤트에 응답합니다.

2. Button.vue

이 구성 요소는 페이징 버튼을 만드는 데 사용되는 버튼 구성 요소입니다.

3. Page.vue

이 구성 요소는 페이지 레이블 및 상태를 포함하여 단일 페이지 블록을 만드는 데 사용됩니다. 페이지 블록은 현재 페이지이거나 현재가 아닌 페이지일 수 있습니다.

다음으로 위의 3가지 구성 요소를 코드를 사용하여 구현해 보겠습니다.

1. Pagination.vue

<template>
  <div class="pagination-container">
    <button-prev :current="current" @onPrev="prev"></button-prev>
    <page v-for="page in pages"
      :key="page"
      :page="page"
      :is-selected="page === current"
      @on-page-selected="selectPage"></page>
    <button-next :current="current" :total="total" @onNext="next"></button-next>
  </div>
</template>
<script>
import ButtonPrev from './ButtonPrev.vue';
import ButtonNext from './ButtonNext.vue';
import Page from './Page.vue';

export default {
  components: { ButtonPrev, ButtonNext, Page },
  props: {
    total: {
      type: Number,
      default: 10
    },
    current: {
      type: Number,
      default: 1
    },
    maxShown: {
      type: Number,
      default: 5
    },
    prevText: {
      type: String,
      default: '上一页'
    },
    nextText: {
      type: String,
      default: '下一页'
    }
  },
  computed: {
    pages () {
      const start = Math.max(1, this.current - Math.floor(this.maxShown / 2));
      const end = Math.min(this.total, start + this.maxShown - 1);
      return Array.from({ length: end - start + 1 }, (v, k) => start + k);
    }
  },
  methods: {
    selectPage (page) {
      if (this.current === page) return;
      this.current = page;
      this.$emit('onPageChanged', page);
    },
    prev () {
      if (this.current > 1) {
        this.selectPage(this.current - 1);
      }
    },
    next () {
      if (this.current < this.total) {
        this.selectPage(this.current + 1);
      }
    }
  }
}
</script>

위 코드에서는 먼저 ButtonPrev, ButtonNext 및 Page 구성 요소를 가져옵니다. 다음으로 props를 이용하여 total, current, maxShown, prevText, nextText 속성을 구하고, 계산된 속성인 페이지를 현재 페이지 번호(current)와 최대 페이지 번호(maxShown)를 기준으로 페이지 번호를 포함하는 배열로 정의합니다. 현재 구성 요소에 사용하기 위해 획득됩니다.

페이지 번호(페이지)가 현재 페이지 번호(현재)와 동일하면 반환하거나 아무것도 하지 않는 selectPage 메서드도 정의합니다. 그렇지 않으면 새 페이지 번호가 상위 구성 요소로 내보내집니다.

prev() 및 next() 메서드는 이전 페이지 및 다음 페이지 이벤트를 처리하고 이벤트에 대한 응답을 방지하는 데 사용됩니다.

2. ButtonPrev.vue

<template>
    <button
      class="btn-previous"
      :disabled="current === 1"
      @click="onPrev()">
      {{ prevText }}
    </button>
</template>

<script>
export default {
  props: {
    prevText: {
      type: String,
      default: '上一页'
    },
    current: {
      type: Number,
      default: 1
    }
  },
  methods: {
    onPrev () {
      this.$emit('onPrev');
    }
  }
}
</script>

<style scoped>
.btn-previous {
  border: none;
  color: #333;
  display: inline-block;
  font-size: 16px;
  padding: 6px 12px;
  margin-right: 5px;
  background-color:#fff;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-previous:disabled {
  color: #ccc;
  cursor: default;
}
</style>

위 코드에서는 먼저 props를 통해 현재 페이지 번호(current)와 이전 페이지 버튼의 텍스트(prevText) 속성을 얻어옵니다. 템플릿에서 클래스 바인딩(비활성화)을 사용하여 버튼 사용 상태를 제어합니다. 상위 구성 요소의 onPrev 이벤트를 트리거하는 onPrev 메서드가 정의됩니다.

3. ButtonNext.vue

<template>
    <button
      class="btn-next"
      :disabled="current === total"
      @click="onNext()">
      {{ nextText }}
    </button>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 10
    },
    nextText: {
      type: String,
      default: '下一页'
    },
    current: {
      type: Number,
      default: 1
    }
  },
  methods: {
    onNext () {
      this.$emit('onNext');
    }
  }
}
</script>

<style scoped>
.btn-next {
  border: none;
  color: #333;
  display: inline-block;
  font-size: 16px;
  padding: 6px 12px;
  margin-left: 5px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-next:disabled {
  color: #ccc;
  cursor: default;
}
</style>

위 코드에서는 ButtonPrev.vue의 코드를 복사하고 텍스트와 판정 조건을 살짝 변경했습니다.

4. Page.vue

<template>
  <button :class="{ current: isSelected }" class="btn-page" @click="onPageSelected(page)">
    {{ page }}
  </button>
</template>

<script>
export default {
  props: {
    page: {
      type: Number,
      required: true
    },
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onPageSelected () {
      this.$emit('onPageSelected', this.page);
    }
  }
}
</script>

<style scoped>
.btn-page {
  border: none;
  color: #333;
  display: inline-block;
  font-size: 16px;
  padding: 6px 12px;
  margin-left: 5px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-page.current {
  background-color: #0078d7;
  color: #fff;
}
</style>

위 코드에서는 props를 통해 페이지 번호(page) 값과 버튼의 isSelected 속성을 얻었습니다. 템플릿에서 클래스 바인딩("현재")을 사용하여 선택한 페이지를 강조 표시합니다.

또한 상위 구성 요소의 onPageSelected 이벤트를 트리거하는 onPageSelected 메서드를 정의합니다.

마지막으로 이러한 구성 요소는 아래와 같이 모든 Vue.js 애플리케이션의 템플릿에서 사용할 수 있습니다.

<template>
  <div>
    <pagination
      :total="total"
      :current="current"
      :maxShown="maxShown"
      :prevText="prevText"
      :nextText="nextText"
      @onPageChanged="onPageChanged"></pagination>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination
  },
  data () {
    return {
      current: 1,
      maxShown: 10,
      prevText: '上一页',
      nextText: '下一页',
      total: 10,
      pageSize: 10,
      items: [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }]
    }
  },
  methods: {
    onPageChanged (page) {
      console.log('Page changed to: ', page);
      // 当前页面数据请求
    }
  }
}
</script>

위 코드에서는 페이지 매김 구성 요소를 도입하여 템플릿의 상위 구성 요소로 만들었습니다. 또한 해당 값을 얻기 위해 total, current 및 maxShown을 구성 요소에 바인딩합니다. onPageChanged 메소드에서는 페이지 변경 이벤트를 처리하고 현재 페이지 번호를 기반으로 해당 데이터를 요청할 수 있습니다.

위 내용은 Vue 구성요소 실습: 페이징 구성요소 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!