preface

Paging function I believe we often see, whether the front page or background management system, as long as it involves more data, will use paging component. This article will bring you your own package of a paging component, without delay, to open the whole ~

A, why encapsulation?

• The paging function is used in many scenarios, so it is considered as a global component
• Self-encapsulation costs are low, add what features you need
• The volume of self-wrapping code can be controlled as opposed to using off-the-shelf component libraries

Two, how to package?

1. The encapsulation

As in the previous article, create a new my-pagination.vue file in the SRC/Components folder

The code is as follows (example) :

<template>
  <div class="my-pagination">
    <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}"<span style = "max-width: 100%; clear: both; min-height: 1em'currentPage > 3'>... </span> <a @click='changePage(item)' href="javascript:;" :class='{active: currentPage===item}' v-for='item in list' :key='item'>{{item}}</a>
    <span v-if='currentPage < pages - 2'>... </span> <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'> Next page </a> </div> </template> <script> import {computed, ref} from'vue'

export default {
  name: 'MyPagination',
  props: {
    total: {
      type: Number,
      default: 80
    },
    pagesize: {
      type: Number, default: 10} // Default initial page Number // page: {//type: Number, // default: Setup (props, {emit, attrs}) {// Attrs is an attribute passed by the parent component, but no attribute received by the props, This attribute is not responsive // Pages per page // total pages // const pagesize = 8 // Total pages const Pages = computed(() => math.ceil (props Props. Pagesize)) / / the current page number / / console log (attrs. Page) const currentPage = ref (attrs. Page | | 1) / / dynamic computing page list const list = Computed (() => {// When the value of total passed by the parent changes, // pages = math.ceil (props. Total/props. Pagesize) const result = [] // Total page = 5; More than 5ifValue <= 5) {// The total page number is less than or equal to 5for (let i = 1; i <= pages.value; i++) {
          result.push(i)
        }
      } else{// The total page number is greater than 5if(currentPage.value <= 2) {// Left critical valuefor (let i = 1; i <= 5; i++) {
            result.push(i)
          }
        } else if(currentPage.value >= pages. Value - 1) {// Right critical valuefor (let i = pages.value - 4; i <= pages.value; i++) {
            result.push(i)
          }
        } else{// Intermediate statefor (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
            result.push(i)
          }
        }
      }
      returnResult}) // Control previous and next page changes const changePage = (type) = > {if (type= = =false) {// The previous page // page is the first page, do not click operationif (currentPage.value === 1) return
        if (currentPage.value > 1) {
          currentPage.value -= 1
        }
      } else if (type= = =true) {// Next page // page is the last page, do not click operationif (currentPage.value === pages.value) return
        if (currentPage.value < pages.value) {
          currentPage.value += 1
        }
      } else{// Click on the page currentPage.value =type
      }
      emit('change-page', currentPage.value)
    }
    return { list, currentPage, pages, changePage }
  }
}
</script>
<style scoped lang="less">
.my-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: # 666;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: #27ba9b;
    }
    &.active {
      background: #27ba9b;
      color: #fff;
      border-color: #27ba9b;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: # 333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>

Copy the code

2. Use

Used in any.vue ending file

The code is as follows (example) : here we simulate using fixed data

<template>
 <div class="home-container">
   <MyPagination @change-page='changePage' :pagesize='10' :total='80' :page='1' />
 </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App'.setup() {/ / filter condition to prepare const reqParams = reactive ({/ / the current page page: 1, / / article of each page number pageSize: From epage = (page) const changePage = (page) => {console.log(page) reqparams.page = page}return { changePage }
  }

}
</script>

<style lang="less">
.home-container {
  margin: 100px auto;
  width: 1000px;
  height: 100px;
}

</style>

Copy the code

Third, the effect demonstration

conclusion

More haste,lespeed