VUE简单封装分页器组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
	props: {
        //总数
        total: {
            type: Number,
            default: 100,
        },
        //每页条数
        pageSize: {
            type: Number,
            default: 10,
        },
        //数字页码展示个数
        showNum: {
            type: Number,
            default: 3,
        },
        //当前页码
        currentPage: {
            type: Number,
            default: 1,
        },
        //当前页码颜色
        activePageColor: {
            type: String,
            default: '#2A97FF',
        },
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
watch: {
    currentPage(newVal) {
        this.calPages(newVal);
        this.currentPageT = newVal;
    },
    pageSize() {
        this.calPages(this.currentPage);
    },
},
methods: {
    calPages(newVal) {
        const left = Math.ceil(this.showNum / 2);
        this.startPage =
            left > newVal
            	? 0
             	: Math.min(newVal - left, this.getPageNum() - this.showNum);
        this.endPage = Math.min(
            this.getPageNum(),
            this.startPage + this.showNum
        );
    },
    getPageNum() {
        return Math.ceil(this.total / this.pageSize);
    },
}

1
2
3
4
5
6
jumpPage(currentPageT) {
    if (currentPageT <= 0 || currentPageT > this.getPageNum()) return;
    this.currentPageT = parseInt(currentPageT);
    this.$emit('currentPageChange', parseInt(currentPageT));
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<template>
    <div class="pagination-item">
        <div class="total">总共{{ getPageNum() }}页,{{ total }}条数据</div>
        <div class="pagination-content">
            <span
                >每页<input
                    v-model="pageSizeT"
                    @change="pageSizeChange(pageSizeT)"
                />条</span
            >
            <span class="btn btn-pre" @click="jumpPage(currentPageT - 1)"
                ><</span
            >
            <span
                v-for="num in endPage - startPage"
                :key="num"
                :style="
                    currentPageT === num + startPage
                        ? 'color:' + activePageColor + ';'
                        : ''
                "
                class="btn btn-num"
                @click="jumpPage(num + startPage)"
                >{{ num + startPage }}</span
            >
            <span class="btn btn-next" @click="jumpPage(currentPageT + 1)"
                >></span
            >
            <span
                ><input v-model="currentPageT" type="number" /><span
                    class="btn btn-jump"
                    @click="jumpPage(currentPageT)"
                    >跳转</span
                ></span
            >
        </div>
    </div>
</template>
<script>
export default {
    name: 'pagination',
    props: {
        //总数
        total: {
            type: Number,
            default: 100,
        },
        //每页条数
        pageSize: {
            type: Number,
            default: 10,
        },
        //数字页码展示个数
        showNum: {
            type: Number,
            default: 3,
        },
        //当前页码
        currentPage: {
            type: Number,
            default: 1,
        },
        //当前页码颜色
        activePageColor: {
            type: String,
            default: '#2A97FF',
        },
    },
    data() {
        return {
            totalT: this.total,
            pageSizeT: this.pageSize,
            currentPageT: '',
            startPage: 0,
            endPage: 0,
        };
    },
    watch: {
        currentPage(newVal) {
            this.calPages(newVal);
            this.currentPageT = newVal;
        },
        pageSize() {
            this.calPages(this.currentPage);
        },
    },
    mounted() {
        this.initData();
    },
    methods: {
        calPages(newVal) {
            const left = Math.ceil(this.showNum / 2);
            this.startPage =
                left > newVal
                    ? 0
                    : Math.min(newVal - left, this.getPageNum() - this.showNum);
            this.endPage = Math.min(
                this.getPageNum(),
                this.startPage + this.showNum
            );
        },
        getPageNum() {
            return Math.ceil(this.total / this.pageSize);
        },
        initData() {
            this.endPage = Math.min(
                this.getPageNum(),
                this.startPage + this.showNum
            );
            if (this.endPage !== 0) this.currentPageT = 1;
        },
        jumpPage(currentPageT) {
            if (currentPageT <= 0 || currentPageT > this.getPageNum()) return;
            this.currentPageT = parseInt(currentPageT);
            this.$emit('currentPageChange', parseInt(currentPageT));
        },
        pageSizeChange(pageSizeT) {
            this.$emit('pageSizeChange', parseInt(pageSizeT));
        },
    },
};
</script>
<style lang="less" scoped>
.pagination-item {
    font-size: 4vw;
    .total {
        text-align: center;
    }
    .pagination-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        input {
            width: 10vw;
            border: rgb(201, 194, 194) 1px solid;
            text-align: center;
        }
    }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
    <div class="search-result-page">
        <pagination
            v-if="currentTab !== 3"
            :total="total"
            :page-size="pageSize"
            :show-num="showNum"
            :current-page="currentPage"
            @currentPageChange="currentPageChange"
            @pageSizeChange="pageSizeChange"
        ></pagination>
    </div>
</template>
<script>
import pagination from '../components/pagination.vue';
export default {
    name: 'searchResult',
    components: {
        pagination,
    },
    data() {
        return {
            total: 100,
            showNum: 5,
            pageSize: 10,
            currentPage: 1,
        };
    },
    mounted() { },
    methods: {
        currentPageChange(currentPage) {
            this.currentPage = currentPage;
        },
        pageSizeChange(pageSize) {
            this.pageSize = pageSize;
        },
    },
};
</script>
<style lang="less" scoped></style>