vue自定义翻页组件的方法

本文实例为大家分享了vue自定义翻页组件的具体代码，供大家参考，具体内容如下效果图如下：1、在components建立page.vue文件templatedivclass=paginatio...

本文实例为大家分享了vue自定义翻页组件的具体代码，供大家参考，具体内容如下

效果图如下：

1、在components建立page.vue文件

<template>
  <div class="pagination">
    <!-- 上 -->
    <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">
      上一张
    </button>
    <button
        v-if="startNumAndEndNum.start > 1"
        @click="getPageNo(1)"
        :class="{ active: pageNo == 1 }"
    >1
    </button>
    <button
        v-if="startNumAndEndNum.start > 2"
        @click="getPageNo(pageNo - continues)"
    >
    </button>
    <!-- 中间部分 -js->
    <button
        v-for="(page, index) in generateMiddlePage"
        :key="index"
        @click="getPageNo(page)"
        :class="{ active: pageNo == page }">
      {{ page }}
    </button>

    <!-- 下 -->
    <button
        v-if="startNumAndEndNum.end < totalPage - 1"
        @click="getPageNo(pageNo +continues)"
    >
    </button>
    <button
        v-if="startNumAndEndNum.end < totalPage"
        @click="getPageNo(totalPage)"
        :class="{active:pageNo==totalPage}">
      {{ totalPage }}
    </button>
    <button
        :disabled="pageNo == totalPage"
        @click="getPageNo(pageNo + 1)">
      下一张
    </button>
  </div>
</template>

<script>

  export default {
    name: "Pagination",
    props: ["pageNo", "pageSize", "total", "continues"],
    computed: {
      //计算出总页数
      totalPage() {
      //向上取整
        return Math.ceil(this.total / this.pageSize);
      },
      //计算出页码的起始和结束数字
      startNumAndEndNum() {
        const {continues, pageNo, totalPage} = this;
      //先定义两个变量存储起始数字与结束数字
        let start = 0,
          end = 0;
        if (continues > totalPage) {
          start = 1;
          end = totalPage;
        } else {
        //起始数字
          start = pageNo - parseInt(continues / 2);
        //结束数字
          end = pageNo + parseInt(continues / 2);
         
          if (start < 1) {
            start = 1;
            end = continues;
          }
         
          if (end > totalPage) {
            end = totalPage;
  js          start = totalPage - continues + 1;
          }
        }
        return {start, end};
      },
      //过滤掉小于起始页的页码
      generateMiddlePage() {
        let arr = [];
        //避免页面中同时使用 v-for和v-if
        for (let i = 0; i <= this.startNumAndEndNum.end; i++) {
          arr.push(i)
        }
        let temp = arr.filter(item => {
          return item >= this.startNumAndEndNum.start
        })
        return temp
      }
    },
    methods: {
      getPageNo(val) {
       //自定义事件子页面向父页面传参，计算属性值
        this.$emit('getPageNo', val)
      },
    }
  };
</script>

<style lang="scss" scoped>
  .pagination {
    text-align: center;
    width: 70px;
    button {
      margin:12px 0px 0px 0px;
      background-color: #fff;
      color: #409eff;
      border:1px solid #409eff;
      outline: none;
      border-radius: 2px;
      padding: 0 4px;
      vertical-align: top;
      display: inline-block;
      font-size: 14px;
      width: 60px;
      height: 38px;
      line-height: 38px;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;

      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
        border:1px solid #ddd;
      }
      &:hover{
       background: #ddeffb;
      }
      &[disabled]:hover{ background: none;}
      &.active {
        cursor: not-allowed;
        background-color: #409eff;
        color: #fff;
      }
    }
  }
</style>

2、在页面中引入组件

<page
    :pageNo="pageNo"
    :pageSize="pageSize"
    :total="pageTotal"
    :continues="5" //超过5时中建按钮有省略号
    @getPageNo="getPageNo"
    />

import page from '@/components/page'

data(){
 return{
  pageNo:1,
  pageSize:1,
  pageTotal:5,
 }
}

//方法中
methods:{
  getPageNo(pageNo){
    this.pageNo=pageNo
   },
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。