Vue3.0 手写分页组件

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
<template>
  <div class="xtx-pagination">
    <a href="javascript:;" v-if="myCurrentPage==1" class="disabled">上一页</a>
    <a href="javascript:;" v-else @click="go(-1)">上一页</a>
    <span v-if="pageInfo.start>2">...</span>
    <a
      href="javascript:;"
      :class="{active: myCurrentPage === item}"
      v-for="(item,idx) in pageInfo.pager"
      :key="idx"
      @click="changePage(item)"
    >{{item}}</a>

    <span v-if="pageInfo.end < pageInfo.pageCount">...</span>

    <a href="javascript:;" v-if="myCurrentPage==pageInfo.end" class="disabled">下一页</a>
    <a href="javascript:;" v-else @click="go(1)">下一页</a>
  </div>
</template>
<script>
import { computed, ref, watch } from 'vue'
export default {
  name: 'XtxPagination',
  props: {
    total: { type: Number, default: 100 },
    pageSize: { type: Number, default: 10 },
    currentPage: { type: Number, default: 1 },
    btnCount: { type: Number, default: 5 }
  },
  setup (props, { emit }) {
    // 1. myTotal 总条数
    // 2. myPageSize 每页共几条
    // 3. myCurrentPage 当前第几页
    // 4. btnCount 页码按钮的数量
    // 5. pager:  页码数组
    const myTotal = ref(100) // 总条数
    const myPageSize = ref(5) // 每页共几条

    const myCurrentPage = ref(2) // 用户实时点击，修改

    const myBtnCount = ref(5) // 分页按钮的个数5个

    watch(props, () => {
      myTotal.value = props.total
      myPageSize.value = props.pageSize
      myCurrentPage.value = props.currentPage
      myBtnCount.value = props.btnCount
    }, { immediate: true })

    // 让当前的页码处于正中间
    // const pager = ref([1, 2, 3, 4, 5])

    // 根据上边信息，实时计算 pager，起始页码，结束页码
    const pageInfo = computed(() => {
      // 总页数
      const pageCount = Math.ceil(myTotal.value / myPageSize.value) // 一共有几页

      // 起点
      let start = myCurrentPage.value - Math.floor(myBtnCount.value / 2)
      // 终点
      let end = start + myBtnCount.value - 1

      // 意外1
      if (start < 1) {
        start = 1
        end = myBtnCount.value > pageCount ? pageCount : myBtnCount.value
      }

      // 意外2
      if (end > pageCount) {
        end = pageCount // 最大的页码
        start = (end - myBtnCount.value + 1) < 1 ? 1 : (end - myBtnCount.value + 1)
      }

      const pager = []
      for (let i = start; i <= end; i++) {
        pager.push(i)
      }

      return { pager, start, end, pageCount }
    })

    const changePage = (page) => {
      if (page === myCurrentPage.value) {
        return
      }

      myCurrentPage.value = page
      emit('current-change', page)
    }
    const go = step => {
      myCurrentPage.value = myCurrentPage.value + step
    }
    return { myTotal, myPageSize, myCurrentPage, myBtnCount, pageInfo, changePage, go }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>

1
2
3
4
5
<Pagination @current-change="pageChange" :total="total"/>

  const pageChange = page => {
      reqParams.page = page
    }