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
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
143
144
145
146
147
// 分页组件
<template>
  <div class="my-pagination">
    <a href="javascript:;" class="button left" :class="{ disabled: currentPage === 1 }" @click="changePage(false)"></a>
    <div class="dian dianL" v-if="currentPage > 3 && pages > 5" @click="delCurrentPage(0)">...</div>
    <div class="number">
      <a href="javascript:;" v-for="item in list" :key="item" :class="{ active: currentPage === item }"
      @click="changePage(item)">{{ item }}</a>
    </div>
    <div class="dian dianR" v-if="currentPage < pages - 2 && pages > 5" @click="delCurrentPage(1)">...</div>
    <a href="javascript:;" class="button" :class="{ disabled: currentPage === pages }" @click="changePage(true)"></a>
  </div>
</template>
<script setup>
import { computed, ref, watch, defineProps, defineEmits } from 'vue-demi'
const emit = defineEmits(['change-page'])
const props = defineProps({
  total: {
    type: Number,
    default: 80
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pagesize: {
    type: Number,
    default: 10
  }
})
watch(() => props.currentPage, (newValue, oldvalue) => {
  currentPage.value = newValue
})
const currentPage = ref(props.currentPage)
// 计算总页数
const pages = computed(() => Math.ceil(props.total / props.pagesize))
// 页码显示组合
const list = computed(() => {
  const result = []
  // 总页数小于等于5页的时候
  if (pages.value <= 5) {
    for (let i = 1; i <= pages.value; i++) {
      result.push(i)
    }
  } else {
    // 总页数大于5页的时候
    // 控制两个极端那边的省略号的有无，页码的显示个数与选中页码居中
    if (currentPage.value <= 2) {
      for (let i = 1; i <= 5; i++) {
        result.push(i)
      }
    } else if (currentPage.value >= 3 && currentPage.value <= pages.value - 2) {
      for (let i = currentPage.value - 2; i <= currentPage.value + 2; i++) {
        result.push(i)
      }
    } else if (currentPage.value > pages.value - 2) {
      for (let i = pages.value - 4; i <= pages.value; i++) {
        result.push(i)
      }
    }
  }
  return result
})
// 点击上一页下一页页码改变页码
const changePage = type => {
  // 点击上一页按钮
  if (type === false) {
    if (currentPage.value <= 1) return
    currentPage.value -= 1
  } else if (type === true) {
    // 点击下一页按钮
    if (currentPage.value >= pages.value) return
    currentPage.value += 1
  } else {
    // 点击页码
    currentPage.value = type
  }
  // 传给父组件当前页码，可以在该事件中做相关操作
  emit('change-page', currentPage.value)
}
// 点击省略号前后位移三位
const delCurrentPage = type => {
  if (type) {
    currentPage.value += 3
    emit('change-page', currentPage.value)
  } else {
    currentPage.value -= 3
    emit('change-page', currentPage.value)
  }
}
</script>
<style scoped lang="scss">
.my-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  position: relative;
  width: 100%;
  margin: auto;
  .button {
    width: 60px;
    height: 60px;
    background: url('@/assets/images/pc/community/btn_tuozhan.png');
    background-size: 100% 100%;
  }
  .left {
    transform: rotate(180deg);
  }
  .number {
    >a {
      font-family: 'arial';
      font-size: 30px;
      width: 90px;
      height: 60px;
      display: inline-block;
      text-align: center;
      line-height: 60px;
      color: #ffffff;
      &.active {
        color: #14e1cd;
        font-size: 34px;
        font-weight: bold;
      }
    }
  }
  .dian {
    width: 60px;
    height: 60px;
    color: #ffffff;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 48%;
    transform: translate(-50%, -50%);
  }
  .dianL {
    left: 18%
  }
  .dianR {
    right: 10%;
  }
}
</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
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
143
144
145
146
147
148
149
150
151
152
153
154
<template>
  <div class="my-pagination">
    <a href="javascript:;" class="button left" :class="{ disabled: currentPage === 1 }" @click="changePage(false)"></a>
    <div class="dian dianL" v-if="currentPage > 3 && pages > 5" @click="delCurrentPage(0)">...</div>
    <div class="number">
      <a href="javascript:;" v-for="item in list" :key="item" :class="{ active: currentPage === item }"
      @click="changePage(item)">{{ item }}</a>
    </div>
    <div class="dian dianR" v-if="currentPage < pages - 2 && pages > 5" @click="delCurrentPage(1)">...</div>
    <a href="javascript:;" class="button" :class="{ disabled: currentPage === pages }" @click="changePage(true)"></a>
  </div>
</template>
<script>
export default {
  props: {
    total: {
      type: Number,
      default: 80
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pagesize: {
      type: Number,
      default: 10
    }
  },
  computed: {
    // 计算总页数
    pages () {
      return Math.ceil(this.total / this.pagesize)
    },
    // 页码显示组合
    list () {
      const result = []
      // 总页数小于等于5页的时候
      if (this.pages <= 5) {
        for (let i = 1; i <= this.pages; i++) {
          result.push(i)
        }
      } else {
        // 总页数大于5页的时候
        // 控制两个极端那边的省略号的有无，页码的显示个数与选中页码居中
        if (this.currentPage <= 2) {
          for (let i = 1; i <= 5; i++) {
            result.push(i)
          }
        } else if (this.currentPage >= 3 && this.currentPage <= this.pages - 2) {
          for (let i = this.currentPage - 2; i <= this.currentPage + 2; i++) {
            result.push(i)
          }
        } else if (this.currentPage > this.pages - 2) {
          for (let i = this.pages - 4; i <= this.pages; i++) {
            result.push(i)
          }
        }
      }
      return result
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 点击上一页下一页页码改变页码
    changePage(type) {
      // 点击上一页按钮
      let currentPage = this.currentPage
      if (type === false) {
        if (this.currentPage <= 1) return
        currentPage -= 1
      } else if (type === true) {
        // 点击下一页按钮
        if (this.currentPage >= this.pages) return
        currentPage += 1
      } else {
        // 点击页码
        currentPage = type
      }
      // 传给父组件当前页码，可以在该事件中做相关操作
      this.$emit('change-page', currentPage)
    },
    // 点击省略号前后位移三位
    delCurrentPage(type) {
      if (type) {
        const currentPage = this.currentPage + 3
        this.$emit('change-page', currentPage)
      } else {
        const currentPage = this.currentPage - 3
        this.$emit('change-page', currentPage)
      }
    }
  },
  mounted () {
  }
}
</script>
<style scoped lang="scss">
.my-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  position: relative;
  width: 100%;
  margin: auto;
  .button {
    width: 60px;
    height: 60px;
    background: url('@/assets/images/pc/community/btn_tuozhan.png');
    background-size: 100% 100%;
  }
  .left {
    transform: rotate(180deg);
  }
  .number {
    >a {
      font-family: 'arial';
      font-size: 30px;
      width: 90px;
      height: 60px;
      display: inline-block;
      text-align: center;
      line-height: 60px;
      color: #ffffff;
      &.active {
        color: #14e1cd;
        font-size: 34px;
        font-weight: bold;
      }
    }
  }
  .dian {
    width: 60px;
    height: 60px;
    color: #ffffff;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    top: 48%;
    transform: translate(-50%, -50%);
  }
  .dianL {
    left: 18%
  }
  .dianR {
    right: 10%;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<templete>
  <Pagination v-if="total > pageSize" class="list_footer" @change-page="changePage" :pagesize="pageSize" :total="total" :currentPage="page" />
<script setup>
// 分页处理
const total = ref(0)
const pageSize = ref(10)
const page = ref(1)
const changePage = num => {
  // 更改页码，发送请求
  page.value = num
  getList()
}
</script>