Today we implement a basic Pagination paginator component

demand

  • The ability to vary the total number of pages by 10 data per page based on incoming total from the outside.
  • If the number of pages is smaller than 8, all pages are displayed.
  • If the number of pages is greater than 7, the displayed page numbers will be automatically adjusted and other page numbers will be omitted instead.
  • When the number of pages is greater than 7, the page number display rule is to display the current page +-2 page numbers, the first and last page page numbers.

demo

I don’t know why you can’t input mouse status = = when recording screen, otherwise it will show red circle disabled and finger overlay icon = =

implementation

For HTML elements, there are three sections: previous page, page number, next page. Use button, UL, button respectively.

  • [Previous page] Need to add the disable attribute preDisable; Go to the click event on the previous page goPre;
  • 【 page number 】 Need to decide whether to display the page number button or ellipsis… ;
  • [Next page] Need to add disable attribute nextDisable; Go to the click event goNext on the next page;

For a component, we need to use Vue props, data, computed, watch, created, the methods of these properties or hook.

  • 【props】 Total number of received parameter data.
  • 【data】 define current page, display data pageSize on each page, page number list pages, pageLength pageLength.
  • [computed] Used to calculate whether to disable the previous page preDisable or the next page button nextDisable.
  • GetPagesLength (); Listen for the current page change, passing the parameter current page to the parent component.
  • Created Initializes compute page number list getPagesLength().
  • 【methods】 Calculate page number list getPagesLength(); Click page number jumpToPage (Index); GoPre (); Next goNext (); Whether the page number is omitted isShowBtn (index); Whether the ellipsis isShowEllipsis (index) is displayed.

Base component pagination.vue

<template>
  <div class="pagination-wrapper">
    <button :disabled="preDisable" @click="goPre"> &# 60; </button> <! -- Button on previous page --><ul> <! --> <li v-for="index in pages" :key="index"  ref="pages">
        <button @click="jumpToPage(index)" v-if="isShowBtn(index)" :class="current===index? 'active':''">{{index}}</button>
        <div v-else-if="isShowEllipsis (index)" class="ellipsis"> &# 8230; </div> <! -- Ellipsis -->
      </li>
    </ul>
    <button :disabled="nextDisable" @click="goNext"> &# 62; </button> <! -- Button on previous page -->
  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  props: {
    total: {
      type: Number,
      default: 200
    }
  },
  data () {
    return{current: 1, // define the current page pageSize: 10, // display pageSize pages: [], // 0 // pageLength pageLength}}, computed: {preDisable() {// Whether to disable the previous pagereturn this.current === 1
    },
    nextDisable() {// Disable the next pagereturnthis.current === this.pageLength } }, watch: GetPagesLength () this.getPagesLength()}, current (val) {// Listen for current page changes, Pass the argument current page this to the parent component.$emit('change', val)
    }
  },
  created() {getPagesLength() this.getPagesLength()}, methods: {getPagesLengthConst more = this.total % this.pagesize? () {const more = this.total % this.pagesize? 1 : 0 this.pageLength = this.total / this.pageSize + more this.pages = new Array(this.pageLength)for (leti = 0; i < this.pageLength; I ++) {this.pages[I] = I + 1}}, jumpToPage (index) {this.current = index},goPre() {this.current -= this.current === 1? 0:1},goNext() {// Next page this.current += this.current === this.pagelEngth? 0:1}, isShowBtn (index) {// Whether the page number is omittedif (this.pageLength < 8) {
        return true
      } else {
        if (index === 1 || index === this.pageLength) {
          return true
        } else {
          if (this.current < 4 && index < 6) {
            return true
          } else if (this.current > this.pageLength - 4 && index > this.pageLength - 6) {
            return true
          } else if (index < this.current + 3 && index > this.current - 3) {
            return true
          } else {
            return false}}}}, isShowEllipsis (index) {// Whether ellipsis is displayedreturn index === 2 || index === this.pageLength - 1
    }
  }
}
</script>

<style lang="stylus" scoped>
.pagination-wrapper
	width 100%
	margin 10px
	display flex
	ul
		display flex
		.active
			border solid 1px #1296db
		.ellipsis
			font-weight bold
			color # 999
			line-height 24px
	button
		height 30px
		width 30px
		margin 0 5px
		border-radius 3px
		border solid 1px #ccc
		color # 777
		font-weight bold
		background #fff
		overflow hidden
		user-select none
		&:hover
			border solid 1px #1296db
			cursor pointer
		&:disabled
			border solid 1px #ccc
			color #ccc
			cursor not-allowed
</style>

Copy the code

Application component pagination-apply.vue

<template>
	<div>
		<Pagination :total="total" @change="changePagination"></Pagination>
		<div class="desc"> the current page: {{current}} < / div > < / div > < / template > < scripttype='text/ecmascript-6'>
import Pagination from 'base/pagination'
export default {
  data () {
    return{total: 200, // Mandatory transfer parameters total current: 1}}, methods: { changePagination (current) { this.current = current } }, components: { Pagination } } </script>Copy the code

To optimize the

  • We can set cursor pointer to display when the cursor is overlaid, and red circle slash to display when the cursor is disabled to disable CURSOR not-allowed.
  • Use user-Select None to disable the user from selecting text in the button to optimize the experience.

More recommended

  • Implement Vue – based Dialog Dialog box components
  • Better Scroll is used to realize Vue rote graph component
  • Understand Vue recursive components, implement Tree Tree control instances ~