自定义分页器组件,有上一页和下一页,和直接到第一页,直接到最后一页以及跳转到某一页功能
时间: 2024-05-03 21:18:50 浏览: 16
可以使用Vue.js框架来实现自定义分页器组件。以下是一个简单实现的示例代码:
```html
<template>
<div>
<button @click="gotoPage(1)" :disabled="currentPage === 1">第一页</button>
<button @click="gotoPage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
<span>{{currentPage}} / {{totalPages}}</span>
<button @click="gotoPage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
<button @click="gotoPage(totalPages)" :disabled="currentPage === totalPages">最后一页</button>
<input type="number" v-model.number="inputPage" min="1" :max="totalPages" step="1">
<button @click="gotoPage(inputPage)" :disabled="inputPage === currentPage || inputPage > totalPages || inputPage < 1">跳转</button>
</div>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
required: true
},
totalPages: {
type: Number,
required: true
}
},
data () {
return {
inputPage: ''
}
},
methods: {
gotoPage (page) {
if (page !== this.currentPage && page >= 1 && page <= this.totalPages) {
this.$emit('update:currentPage', page)
}
}
}
}
</script>
```
在这个示例中,我们定义了一个自定义分页器组件,它包含了上一页、下一页、直接到第一页、直接到最后一页以及跳转到某一页的功能。组件接受两个props:currentPage表示当前页码,totalPages表示总页数。组件使用v-model方式来实现跳转到某一页的功能,用户输入页码后点击跳转按钮即可实现跳转。
在组件内部,我们定义了一个gotoPage方法,它接受一个page参数,表示要跳转到的页码。在这个方法中,我们首先判断要跳转到的页码是否与当前页码相同,如果相同,则不进行跳转。如果不同,则判断要跳转到的页码是否在合法范围内(1到总页数之间),如果不在合法范围内,则不进行跳转。如果在合法范围内,则使用$emit方法触发一个update:currentPage事件,将要跳转到的页码作为参数传递出去,由父组件接收并更新currentPage属性,从而实现跳转到某一页的功能。