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
| <template>
| <div class="n_pagination flex-center">
| <div class="n_pagination_item flex-center prohibited">
| <span>{{ $t('Previous') }}</span>
| </div>
| <div class="n_page_number flex-center">
| <span>1</span>
| <span>/</span>
| <span>300</span>
| </div>
| <div class="n_pagination_item flex-center">
| <span>{{ $t('Next') }}</span>
| </div>
| </div>
| </template>
|
| <script>
| export default {
| name: 'nPagination',
| props: {
| total: {
| type: Number,
| default: 0
| },
| pageSize: {
| type: Number,
| default: 10
| },
| currentPage: {
| type: Number,
| default: 1
| }
| },
| data() {
| return {
| pageList: [],
| totalPage: 0,
| currentPage: 1
| }
| },
| watch: {
| total() {
| this.init()
| },
| pageSize() {
| this.init()
| },
| currentPage() {
|
| }
| }
| }
| </script>
|
| <style lang="less" scoped>
| @green2: #f0f0f0;
| @green: #c4d600;
|
| .n_pagination {
| width: 100%;
| height: 2em;
| color: #646566;
|
| .n_page_number {
| width: 3em;
|
| span {
| font-size: .37em;
| }
| }
|
| .n_pagination_item {
| border: .01em solid @green2;
| width: 3em;
| height: 1em;
| color: @green;
|
| span {
| font-size: .4em;
| }
| }
|
| .prohibited {
| background-color: #f7f8fa;
| color: #c4c5c6;
| }
| }
| </style>
|
|
