介绍
在web应用程序中，分页功能是必不可少的一个组件。一个好的分页组件应该展示简洁明了，功能丰富，而且易于集成和使用。
在本文中，我们将介绍如何使用vue.js框架来开发一个高度可定制化的分页组件。我们将通过代码示例来详细说明如何使用vue组件开发。
技术栈
vue.js 2.xjavascript (es6)html5和css3开发环境
node.js v8.9.3npm v5.5.1vue.js v2.5.2分页组件需求
通过props接收总页面数(total)和当前页面数(current)属性可以配置显示的最大页码数(maxshown)可以配置按钮显示的文本 (prevtext和nexttext) 和按钮样式点击页码可以切换到相应的页面当前页码高亮显示当前页面没有前一页时，忽略上一页按钮的点击事件当前页面没有后一页时，忽略下一页按钮的点击事件设计思路和代码实现
根据需求，我们将分页组件拆分为多个小组件来实现。我们需要创建以下3个小组件：
pagination.vue主分页组件，负责分页数据和逻辑的处理。向子组件传递分页信息和响应子组件的事件。
button.vue该组件为按钮组件，用于创建分页按钮。
page.vue该组件用于创建单个页面块，包含页面标号和状态。页面块可以是当前页面或非当前页面。
接下来，让我们使用代码来实现以上3个组件。
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>
上面的代码中，我们首先import了buttonprev、buttonnext和page组件。接着，用props方式获取了total, current, maxshown, prevtext和nexttext属性，并定义了计算属性pages，根据当前页码(current)和最大页码数(maxshown)得到一个包含页码数的数组，以在组件中呈现。
我们还定义了selectpage方法，在该方法中，如果页码(page)与当前页码(current)相同，则返回或不做任何事情。否则，将新页码发出给父组件。
prev()和next()方法用于处理上一页和下一页事件，并防止event被响应。
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>
上述代码中，我们首先通过props获取了当前页码(current)和上一页按钮的文本(prevtext)属性。在模版中，使用类绑定(disabled)控制按钮使用状态。定义了一个onprev方法，该方法触发父组件的onprev事件。
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>
上述代码中，我们将buttonprev.vue的代码复制了一份，稍微改了一下文本和判断条件。
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>
上述代码中，我们通过props获取了该页码的值(page)和按钮的isselected属性。在模板中，使用类绑定(current)高亮显示选中的页面。
我们还定义了一个onpageselected方法，该方法会触发父组件的onpageselected事件。
最后，这些组件可以在任何vue.js应用程序中的template中使用，如下所示：
<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>
上述代码中，我们引入了pagination组件，并将其作为template中的父组件。我们还将total, current和maxshown绑定到组件，以便获取到它们的值。在onpagechanged方法中，我们可以处理页面更改事件，并根据当前页码请求相应的数据。
以上就是vue组件实战：分页组件开发的详细内容。