<template> <div class="pagination" :class="showShadow?'showShadow':''"> <u-button size="mini" shape="circle" @click="goToPage(currentPage - 1)" :disabled="currentPage <= 1">上一页</u-button> <text>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text> <u-button size="mini" shape="circle" @click="goToPage(currentPage + 1)" :disabled="currentPage >= totalPages">下一页</u-button> </div> </template> <script> export default { name: 'UniPagesNav', props: { currentPage: { type: Number, required: true }, totalPages: { type: Number, required: true }, showShadow: { type: Boolean, default: true } }, methods: { goToPage(page) { if (page >= 1 && page <= this.totalPages) { this.$emit('pagechanged', page); } } } } </script> <style scoped> .pagination { display: flex; justify-content: center; align-items: center; background: #fff; padding: 20rpx; border-radius: 20rpx; } .showShadow{ box-shadow: 1px 1px 5px #eee; } .pagination text { margin: 0 10px; } </style>