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