Vue 封装分页器Pager

效果

初始化

属性

属性名	含义	类型	必填	默认值
current	当前页码	Number	否	1
total	总数据量	Number	否	0
limit	页容量	Number	否	10
visibleNumber	可见页码数	Number	否	10

事件

事件名	含义	事件参数	参数类型
pageChange	页码变化	新的页码	Number

分页器template

<template>
    <div class="pager-contianer" v-if="this.pageNumber > 1">
        <a @click="handleClick(1)" :class="{ disabled: this.current === 1 }">首页</a>
        <a @click="handleClick(current - 1)" :class="{ disabled: this.current === 1 }">上一页</a>

        <a @click="handleClick(n)" v-for="(n, i) in pagesList" :key="i" :class="{ active: current === n }">{{ n }}</a>

        <a @click="handleClick(current + 1)" :class="{ disabled: this.current === pageNumber }">下一页</a>
        <a @click="handleClick(pageNumber)" :class="{ disabled: this.current === pageNumber }">尾页</a>
    </div>
</template>

• 页数为 0 不渲染
• 根据当前页数判断是否添加 disabled 类
• 绑定点击事件

conputed

    computed: {
        pageNumber() {
            return Math.ceil(this.total / this.limit)
        },
        maxPages() {
            let max = this.minPages + this.visibleNumber - 1
            if (max > this.pageNumber) {
                max = this.pageNumber;
            }
            return max;
        },
        minPages() {
            let min = this.current - Math.floor(this.visibleNumber / 2)
            if (min < 1) {
                min = 1;
            }
            return min;
        },
        pagesList() {
            let list = [];
            for (let i = this.minPages; i < this.maxPages; i++) {
                list.push(i)
            }
            return list
        },
    },

pageNumber

Math.ceil(总页数/页容量)

最小页

当前页-Math.foolr(可见页码数/2)

最大页

最小页 + (可见页码数-1)

事件绑定

    methods: {
        handleClick(newPage) {
            if (newPage < 1) {
                newPage = 1
                // 界定最小页码
            }
            if (newPage > this.pageNumber) {
                newPage = this.pageNumber
                // 界定最大页码
            }
            if (newPage === this.current) {
                return;
                // 点击页码和当前页码不触发事件
            }
            this.$emit('update:current', newPage)
            //  触发组件事件
        }
    }

事件 handleClick(newPage),传入当前页数

组件事件

this.$emit('update:current', newPage) 使用 $emit 方法触发一个自定义事件需要使用 this 关键字来引用当前组件实例中的 $emit 方法。因为 $emit 方法是在组件实例的上下文中调用的，它需要访问组件实例的属性和方法，从而触发自定义事件。

父元素监听

@update:current="handlePageChange($event)" 父元素监听,@事件名,

• 直接调用函数 handlePagechange
• 手动传参 handlePageChange($event) $event 变量只在模板中有效，在 JavaScript 代码中无法使用。另外，在使用$event变量时，我们需要确保自定义事件确实传递了数据，否则 $event 变量会为 undefined。另外，在事件处理方法中，我们可以使用 $event.target 来获取触发当前事件的 DOM 元素，以便进行相关的操作。

需要注意的是，使用 $event 变量来获取传递的数据时，我们需要确保传递和接收的数据类型和数量一致，否则会导致数据传递和事件处理错误。