vue实现分页组件

Posted 2020-12-03 guomin

创建pagination.vue

/*
 * 所需参数
 * total  Number  总页数
 * current  Number  当前页面下标
 * pageSize  Number  页面显示条数
 * sizes Array  页面条数容器数组
 * jump(index)  function 重新获取数据的方法
 * getPageSize(index) function 更改页面显示条数的方法
 */

<style lang="less">
    @color:#1199F0;
    .page-wrapper{
        padding:20px 10px;
        ul{
            overflow: hidden;
            display: table;
            margin: 0 auto;
            height: 50px;
            list-style: none;
            li{
                float:left;
            }
        }
        .paging-size{
            height:30px;
            margin-right:20px;
            select{
                width:50px;
                height:30px;
                text-align:center;
                border:1px solid @color;
            }
        }
        .paging-item{
            height: 30px;
            line-height: 30px;
            margin: 3px;
            padding-left:12px;
            padding-right:12px;
            border-radius: 5px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            &:hover,&.current{
                color:#fff;
                background-color: @color;
            }
        }
        .paging-jump{
            margin-left:20px;
            margin-top:3px;
            height:30px;
            font-size:0;
            overflow: hidden;
            input[type="number"]{
                float: left;
                padding:0 5px;
                width:50px;
                height:28px;
                text-align:center;
                border:1px solid @color;
            }
            input[type="button"]{
                float: left;
                padding:0 12px;
                height:30px;
                border:none;
                color:#fff;
                background-color: @color;
            }
        }
    }
</style>
<template>
    <div class="page-wrapper">
        <ul>
            <li class="paging-size">
                <select @change="getPageSize">
                    <option v-for="i in sizes" :value="i" :selected="i==pageSize">{{i}}</option>
                </select>
            </li>
            <li class="paging-item" v-if="current!=1" @click=‘jump(1)‘>首页</li>
            <li class="paging-item" v-if="current-1>0" @click=‘jump(current-1)‘>上一页</li>
            <li class="paging-item" v-if="current-2>0" @click=‘jump(current-2)‘>{{current-2}}</li>
            <li class="paging-item" v-if="current-1>0" @click=‘jump(current-1)‘>{{current-1}}</li>
            <li class="paging-item current" @click=‘jump(current)‘>{{current}}</li>
            <li class="paging-item" v-if="total-current>1" @click=‘jump(current+1)‘>{{current+1}}</li>
            <li class="paging-item" v-if="total-current>2" @click=‘jump(current+2)‘>{{current+2}}</li>
            <li class="paging-item" v-if="total-current>1" @click=‘jump(current+1)‘>下一页</li>
            <li class="paging-item" v-if="current!=total" @click=‘jump(total)‘>尾页</li>
            <li class="paging-jump">
                <input type="number" v-model="jumpPage" :max="total" min="0"/>
                <input type="button" value="跳转"  @click=‘jump(jumpPage)‘/>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                jumpPage:0
            }
        },
        props:{
            total:Number,
            current:Number,
            pageSize:Number,
            sizes:{
                type:Array,
                default:function(){
                    return [15,25,35]
                }
            }
        },
        mounted(){
            if(this.total-this.current>1){
                this.jumpPage=this.current+1;
            }
            else{
                this.jumpPage=1;
            }
        },
        watch:{
            current(){
                if(this.total-this.current>1){
                    this.jumpPage=this.current+1;
                }
                else{
                    this.jumpPage=1;
                }
            }
        },
        methods:{
            jump(index){
                index=Number(index);
                if (this.current != index && index > 0 && index < this.total + 1) {
                    this.$emit(‘jump‘, index);
                }
            },
            getPageSize(e){
                let pageSize=Number(e.target.value);
                this.$emit(‘getPageSize‘,pageSize);
            }
        }
    }
</script>

 

index.vue中注册

  components:{
      ‘v-pagination‘:(resolve)=>{
          require([‘components/pagination‘],resolve);
      }
  }

 

index.vue中使用

      <v-pagination
          :total="total"
          :current="current"
          :pageSize="pageSize"
          @getPageSize="getPageSize"
          @jump="jump"
          ></v-pagination>

完整index.vue代码

<template>
  <div class="wrapper" v-swipeleft=‘left‘ v-swiperight=‘right‘>
      <v-pagination
          :total="total"
          :current="current"
          :pageSize="pageSize"
          @getPageSize="getPageSize"
          @jump="jump"
          ></v-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      total:20,
      current:4,
      pageSize:25
    }
  },
  methods:{
      jump(index){
            this.current=index;
      },
      getPageSize(pageSize){
          this.pageSize=pageSize;
      }
  },
  components:{
      ‘v-pagination‘:(resolve)=>{
          require([‘components/pagination‘],resolve);
      }
  }
}
</script>
<style lang="less" scoped="scoped">
.wrapper{
    height:100%;
    width:100%;
}
</style>