Vue component practice: paging component development

Introduction

In web applications, the paging function is an essential component. A good paging component should be simple and clear in presentation, rich in functions, and easy to integrate and use.

In this article, we will introduce how to use the Vue.js framework to develop a highly customizable paging component. We will explain in detail how to develop using Vue components through code examples.

Technology Stack

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

Development environment

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

Paging component Requirements

• Receive the total number of pages (total) and the current number of pages (current) through props
• You can configure the maximum number of pages displayed (maxShown)
• Yes Configure the text (prevText and nextText) and button style displayed by the button
• Click the page number to switch to the corresponding page
• The current page number is highlighted
• The current page has no previous page When, ignore the click event of the previous page button
• When the current page does not have the next page, ignore the click event of the next page button

Design ideas and code implementation

Based on requirements, we split the paging component into multiple small components for implementation. We need to create the following 3 small components:

1. Pagination.vue

The main paging component is responsible for processing paging data and logic. Pass paging information to subcomponents and respond to subcomponent events.

2. Button.vue

This component is a button component, used to create paging buttons.

3. Page.vue

This component is used to create a single page block, including page label and status. Page blocks can be the current page or non-current pages.

Next, let us use code to implement the above 3 components.

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>

In the above code, we first imported the ButtonPrev, ButtonNext and Page components. Next, the total, current, maxShown, prevText and nextText attributes are obtained using props, and the calculated attribute pages is defined. Based on the current page number (current) and the maximum page number (maxShown), an array containing the page number is obtained to use in the component. Present.

We also define the selectPage method, in which if the page number (page) is the same as the current page number (current), return or do nothing. Otherwise, the new page number is emitted to the parent component.

The prev() and next() methods are used to handle previous page and next page events and prevent events from being responded to.

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>

In the above code, we first obtain the current page number (current) and the text (prevText) attributes of the previous page button through props. In the template, use class binding (disabled) to control the button usage state. An onPrev method is defined, which triggers the onPrev event of the parent component.

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>

In the above code, we copied the code of ButtonPrev.vue and slightly changed the text and judgment conditions.

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>

In the above code, we obtain the value of the page number (page) and the isSelected attribute of the button through props. In the template, use class binding ("current") to highlight the selected page.

We also define an onPageSelected method, which triggers the onPageSelected event of the parent component.

Finally, these components can be used in a template in any Vue.js application, as shown below:

<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>

In the above code, we introduced the Pagination component and used it as a template parent component in . We also bind total, current and maxShown to the component to get their values. In the onPageChanged method, we can handle the page change event and request the corresponding data based on the current page number.

The above is the detailed content of Vue component practice: paging component development. For more information, please follow other related articles on the PHP Chinese website!