自定义vue组件之仿百度分页逻辑

曾经终败给现在 2021-10-19 10:24 170阅读 0赞

![1691776-20190725101742695-1311756164.png][]

<template>
      <div>
        <ul   :total="total" :pageSize="pageSize" :pageNum="pageNum">
          <li @click="leftRight(1)">
            <上一页
          </li>
          <li @click="pageClick(item)" :style="{color:item==page?'red':'black'}" v-for="item in arr" :key="item">{
        {item}}
          </li>
          <li @click="leftRight(2)">下一页></li>
        </ul>
      </div>
    </template>
    
    <script>
      export default {
        
        props: {
        
          total: {
        
            type: Number,
            default: 0
          },
          pageSize: {
        
            type: Number,
            default: 10
          },
          pageNum: {
        
            type: Number,
            default: 1
          },
        },
        data() {
        
          return {
        
            length: 0,
            page: 1,
            arr: [],
          }
        },
        mounted() {
        
          this.getLength()
        },
        methods: {
        
          getLength() {//获取页码大小并初始化页面
            let shuzu = [];
            if (this.total % this.pageSize == 0) {
        
              this.length = this.total / this.pageSize;
            } else {
        
              this.length = parseInt(this.total / this.pageSize) + 1;
    
            }
            // console.log(this.length + 'this.length')
            if (this.length >= 10) {
        
              shuzu.length = 10
            } else {
        
              shuzu.length = this.length
            }
            for (let i = 0; i <shuzu.length; i++) {
        
              shuzu[i] = i + 1
            }
            this.arr = shuzu
          },
          getpage(page) {
        
            let shuzu = [];
            let j = 0
            let str = 0
            if (page + 5 <= this.length) {
        
              str = page + 5
              j = page - 5
            } else {
        
              str = page + (this.length - page)
              j = str - 10
            }
    
            for (let i = j+1; i <= str; i++) {
        
              shuzu.push(i)
            }
            this.arr = shuzu
          },
          pageClick(page) {
        
            this.page = page
            // console.log(this.arr.length)
            if (page <= this.arr.length / 2 || this.length <= 10) {
        
              alert('1')
              this.getLength()
            } else {
        
              this.getpage(page)
            }
            this.pageNumChange(this.page)
          },
          leftRight(e){
        
            switch (e){
        
              case 1:
                if(this.page==1){
        
                  this.page=1
                }
                else {
        
                  this.page-=1
                }
                this.pageClick(this.page)
                break;
              case 2:
                if(this.page==this.length){
        
                  this.page=this.length
                }else {
        
                  this.page+=1
                }
                this.pageClick(this.page)
                break;
            }
            this.pageNumChange(this.page)
          },
          pageNumChange(page){
        
            this.$emit('pageNumChange',page)
          }
        }
      }
    </script>
    
    <style scoped>
      * {
        
        margin: 0;
        padding: 0;
      }
    
      ul > li {
        
        -ms-user-select:none;
        margin:0 2px;
        display: inline-block;
        border: 1px black solid;
        min-width: 20px;
        height: 20px;
        border-radius: 2px;
        cursor: pointer;
        vertical-align: middle;
      }
    
      li:hover {
        
        border: 1px cornflowerblue solid;
      }
    </style>

![1691776-20190725102126877-428100154.png][]

页面样式没有调整好  不过逻辑是完成了

转载于:https://www.cnblogs.com/hsBK/p/11242615.html

[1691776-20190725101742695-1311756164.png]: /images/20211018/bc8c3e59c9b1447bbdfb59664980ac91.png
[1691776-20190725102126877-428100154.png]: /images/20211018/046ebd45977d4658a5e7ffa0037bcbb9.png