【Vue】分页组件

基本用法

<template>
  <div class="test-container">
  <Pager :total="505" :current="current" @pageChange="handlePageChange" />
  </div>
</template>

<script>
import Pager from '@/components/Pager'
export default {
  data() {
    return {
      current:1
    }
  },
  //组件局部注册
  components: {
    Pager
  },
  methods: {
    handlePageChange(newPage){
    //获取当前页码
      this.current=newPage
    }
  },
};

</script>

<style lang="less" scoped>

</style>

HTML代码

<template>
    <div class="pager-container" v-if="pageNumber > 1">
        <!-- 当前页码为1禁用 点击跳转到第一个页码 -->
        <a :class="{ disabled: current === 1 }" @click="handleClick(1)">|&lt;&lt;</a>
        <!-- 当前页码为1禁用 点击跳转到上一个页面 -->
        <a :class="{ disabled: current === 1 }" @click="handleClick(current - 1)">&lt;&lt;</a>
        <!--遍历页码 :class选中当前页码样式改变 -->
        <a v-for="(n, i) in numbers" :key="i" :class="{ active: n === current }" @click="handleClick(n)">{{ n }}</a>
        <!-- 页码是最后一个的时候禁用，点击页码加1 -->
        <a :class="{ disabled: current === pageNumber }" @click="handleClick(current + 1)">&gt;&gt;</a>
        <!-- 页码是最后一个的时候禁用，点击跳转到最后一个页面 -->
        <a :class="{ disabled: current === pageNumber }" @click="handleClick(pageNumber)">&gt;&gt;|</a>
    </div>
</template>

页码=1时，禁用 |<< 、<<增加属性disabled样式

页码是最后一个时，禁用 >>| 、>>增加属性disabled样式

Js代码

<script>
export default {
    props: {
        current: {//当前页码
            type: Number, //类型
            default: 1   //默认值
        },
        total: {//总数据量
            type: Number,
            default: 0
        },
        limit: {//页容量
            type: Number,
            default: 10,
        },
        visiblieNumber: {//可见代码数
            type: Number,
            default: 10
        }
    },
    computed: {
        pageNumber() {
            //取整(当前总数据量/当前页面容纳页码数) 求总页面数
            return Math.ceil(this.total / this.limit)
        },
        visibleMin() {
            //取中间值
            let min = this.current - Math.floor(this.visiblieNumber / 2);
            if (min < 1) {
                min = 1
            }
            return min
        },
        visibleMax() {
            let max = this.visibleMin + this.visiblieNumber - 1;
            if (max > this.pageNumber) {
                max = this.pageNumber
            }
            return max;
        },
        // 动态生成页码
        numbers() {
            //计算页码数
            let nums = [];
            for (let i = this.visibleMin; i <= this.visibleMax; i++) {
                nums.push(i);
            }
            return nums;
        }
    },
    methods: {
        //向上抛出事件
        handleClick(newPage) {
            if (newPage < 1) {
                newPage = 1
            }
            if (newPage > this.pageNumber) {
                newPage = this.pageNumber
            }
            if (newPage === this.current) {
                return
            }
            this.$emit("pageChange", newPage)
        }
    }
}
</script>

<Pager :total="55" />有:total在网页中Page才显示