区分views和components

frontend/admin/src/components/pager.vue

@@ -0,0 +1,93 @@
+<template>
+    <nav v-show="visible">
+        <ul class="pagination pagination-lg">
+            <li class="{{ pagination.currentPage > 1 ? '' : 'disabled' }}">
+                <a href="#" aria-label="Previous" @click.prevent="changePage(1)">
+                    <span aria-hidden="true">{{ $t("pagination.firstPage") }}</span>
+                </a>
+            </li>
+            <li class="{{ pagination.currentPage > 1 ? '' : 'disabled' }}">
+                <a href="#" aria-label="Previous" @click.prevent="changePage(pagination.currentPage - 1)">
+                    <span aria-hidden="true">&laquo;</span>
+                </a>
+            </li>
+            <li v-if="pagination.currentPage > 1 && pagination.currentPage - 1 > offset">
+                <a href="#" aria-label="Next" @click.prevent="changePage(from)">
+                    <span aria-hidden="true">...</span>
+                </a>
+            </li>
+            <li v-for="num in data" :class="{'active': num == pagination.currentPage}">
+                <a href="#" @click.prevent="changePage(num)">{{ num }}</a>
+            </li>
+            <li v-if="pagination.totalPages - pagination.currentPage > offset">
+                <a href="#" aria-label="Next" @click.prevent="changePage(to)">
+                    <span aria-hidden="true">...</span>
+                </a>
+            </li>
+            <li class="{{ pagination.currentPage < pagination.totalPages ? '' : 'disabled' }}">
+                <a href="#" aria-label="Next" @click.prevent="changePage(pagination.currentPage + 1)">
+                    <span aria-hidden="true">&raquo;</span>
+                </a>
+            </li>
+            <li class="{{ pagination.currentPage < pagination.totalPages ? '' : 'disabled' }}">
+                <a href="#" aria-label="Next" @click.prevent="changePage(pagination.totalPages)">
+                    <span aria-hidden="true">{{ $t("pagination.lastPage") }}</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</template>
+<script>
+    export default{
+        props: {
+            pagination: {
+                type: Object,
+                required: true
+            },
+            callback: {
+                type: Function,
+                required: true
+            },
+            offset: {
+                type: Number,
+                default: 4
+            },
+            visible: {
+                type: Number,
+                default: 1
+            }
+        },
+        computed: {
+            data: function () {
+                this.visible = 1;
+                var from = this.pagination.currentPage - this.offset;
+                if (from < 1) {
+                    from = 1;
+                }
+                var to = from + (this.offset * 2);
+                if (to >= this.pagination.totalPages) {
+                    to = this.pagination.totalPages;
+                }
+                this.from = from;
+                this.to = to;
+                var arr = [];
+                while (from <= to) {
+                    arr.push(from);
+                    from++;
+                }
+                if (arr.length == 1)
+                    this.visible = 0;
+                return arr;
+            }
+        },
+        methods: {
+            changePage(page) {
+                if (page > 0 && page <= this.pagination.totalPages) {
+                    this.$set('pagination.currentPage', page);
+                    this.$router.go({name: this.$route.name, params: {page: page}});
+                    this.callback();
+                }
+            }
+        }
+    };
+</script>