To realize why

Learning vue, doing recently a try project, there are two pages in the paging component, but in order to be able to use in the second component, the paging component changed again change, but in the end still can not meet the demand of the use of these two pages, and eventually found a problem: the component’s design is to realize the reuse, reduce repetitive tasks. Then it is obvious that the road to VUE learning should be roughly two steps:

  1. Step1: use vue to implement page business logic

  2. Step2: further abstract components so that they can be reused

It seems that I have been struggling with step1, and now I have stumbled upon the needs of step2, so of course I want to complete this challenge. I feel that this reusable component should follow some “specification”, so as to ensure its universality, but I have no idea how to write the component. Suddenly, I thought that since I have no idea, why not learn from other frameworks? So I chose the Element framework and refer to its paging component

Looking for some “mysterious” norm

Related links: element_pagination

Specification 1: Parent components pass values instead of fetching them themselves

<div class="block">
  <span class="demonstration"> </span> <el-pagination layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>
Copy the code

From the above invocation I can conclude that some of the values required by the paging component, such as page count, current page, and so on, are passed from the parent component rather than retrieved by itself. Getting it yourself is usually determined by routing, which obviously increases the coupling

Specification 2: Component events need to be passed to the parent component for processing

  1. Complete the switch of the component itself (e.g. click on page 5 and add something like an ‘active’ class to page 5)
  2. Complete the implementation of the business logic (by passing this event to the parent, which does the logic to request data for a page)

The first step is responsible for switching component pages, and the second step allows the parent component to complete the business logic, which ensures that the child component does not involve specific business, so the reusability is greatly improved.

implement

Determine the implementation effect

I myself wanted to implement the pagination effect in Element with more than 7 pages, as shown in the figure below

  • The home page and the back page are always displayed
  • The ellipses on both sides are not necessarily displayed
  • The two buttons on the very edge are responsible for one page ahead or one page behind
  • In addition to the front and back pages, five page numbers are displayed

Determines the parameters to be passed to the child components

As you can see, there are a lot of parameters that can be passed in element, even the background. Here I’m going to take the time to pass two values: totalPage and currentPage.

Determines the events passed by the child to the parent

As you can see, there are two events in element: a change in the number of items displayed on the page and a change in the current page. In this case, I only need to trigger a current-change event when the current page changes

Deal with a small problem

The above page logic is when the total number of pages is greater than or equal to 7 pages, if the total number of pages is less than 7 pages is not ok, I’m going to take a stupid method, if the total number of pages is less than 7 pages, then I have as many pages as I can display

code

Their code will be implemented to try to send a NPM package, we can use directly

NPM address

Making the address

Of course, because this component only implements the basic functions, you can directly modify the style of the paging component and so on

Pagination. Vue address