Shulou(Shulou.com)06/02 Report--

This article introduces what vue encapsulates custom pager components and how to use them. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Preface

Paging is the most commonly used function when developing various systems. The following is a paging component encapsulated by me.

The following parameters are required to implement the pager operation

Current page: pageNo

Number of display posts per page: pageSize

Total number of data entries: total

Number of consecutive page numbers: continues (usually odd, page symmetry is more beautiful)

Pager appears frequently in major projects, so we can package it into a static component and register this component globally.

1. Global registration component method: operating in the mian.js file

Import Pagination from'@ / components/Pagination' / / component path Vue.component (Pagination.name,Pagination)

two。 Other page pager can be used directly. The parent page passes data to the child page, using prop.

Export default {name: "index", data () {return {pageNo:1, pageSize:4,}} Methods: {getPageNo (pageNo) {this.pageNo=pageNo}

Pager Pagination.vue

Previous page 1 {{page}} {{totalPage}} next page has {{total}} export default {name: "Pagination" Props: ["pageNo", "pageSize", "total", "continues"], computed: {/ / calculate the total number of pages totalPage () {/ / round up return Math.ceil (this.total / this.pageSize) }, / / calculate the starting and ending digits of the page number startNumAndEndNum () {const {continues, pageNo, totalPage} = this; / / define two variables to store the starting and ending digits let start = 0, end = 0 If (continues > totalPage) {start = 1; end = totalPage;} else {/ / starting digit start = pageNo-parseInt (continues / 2) / / ending digits end = pageNo + parseInt (continues / 2); if (start)

TotalPage) {end = totalPage; start = totalPage-continues + 1;}} return {start, end};}, / / filter out the page number generateMiddlePage () {let arr = [] that is smaller than the starting page / / avoid using both v-for and v-if for in the page (let I = 0) I {return item > = this.startNumAndEndNum.start}) return temp}}, methods: {getPageNo (val) {/ / Custom event child page passes parameters to the parent page Calculate the attribute value this.$emit ('getPageNo', val)},}} .pagination {text-align: center; button {margin: 05px; background-color: # f4f4f5; color: # 606266; outline: none; border-radius: 2px; padding: 04px; vertical-align: top; display: inline-block; font-size: 13px Min-width: 35.5 px; height: 28px; line-height: 28px; cursor: pointer; box-sizing: border-box; text-align: center; border: 0; & [disabled] {color: # c0c4cc; cursor: not-allowed } & .active {cursor: not-allowed; background-color: # 409eff; color: # fff;}} .active {background: skyblue } about the vue packaging custom pager components and usage is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.