使用Vue构建可重用的分页组件

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Web应用程序中资源分页不仅对性能很有帮助,而且从用户体验的角度来说也是非常有用的。在这篇文章中,将了解如何使用Vue创建动态和可用的分页组件。

基本结构

分页组件应该允许用户访问第一个和最后一个页面,向前和向后移动,并直接切换到近距离的页面。

大多数应用程序在用户每次更改页面时都会发出API请求。我们需要确保组件允许这样做,但是我们不希望在组件内发出这样的请求。这样,我们将确保组件在整个应用程序中是可重用的,并且请求都是在操作或服务层中进行的。我们可以通过使用用户单击的页面的数字触发事件来实现此目的。

有几种可能的方法来实现API端点上的分页。对于这个例子,我们假设API告诉我们每个页面的结果数、页面总数和当前页面。这些将是我们的动态props

相反,如果API只告诉记录的总数,那么我们可以通过将结果的数量除以每一页的结果数来计算页数:totalResults / resultsPerPage

我们想要渲染一个按钮到第一页上一页页面数量范围下一页最后一页

[first] [next] [1] [2] [3] [previous] [last]

比如像下图这样的一个效果:

尽管我们希望渲染一个系列的页面,但并不希望渲染所有可用页面。让我们允许在我们的组件中设置一个最多可见按钮的props

既然我们知道了我们想要的组件要做成什么,需要哪些数据,我们就可以设置HTML结构和所需要的props

<template id="pagination">
    <ul class="pagination">
        <li>
            <button type="button">« First</button>
        </li>
        <li>
            <button type="button">«</button>
        </li>
        <!-- 页数的范围 -->
        <li>
            <button type="button">Next »</button>
        </li>
        <li>
            <button type="button">»</button>
        </li>
    </ul>
</template>

Vue.component('pagination', {
    template: '#pagination',
    props: {
        maxVisibleButtons: {
            type: Number,
            required: false,
            default: 3
        },
        totalPages: {
            type: Number,
            required: true
        },
        total: {
            type: Number,
            required: true
        },
        currentPage: {
            type: Number,
            required: true
        }
    }
})

上面的代码注册了一个pagination组件,如果调用这个组件:

<div id="app">
    <pagination></pagination>
</div>

这个时候看到的效果如下:

注意,为了能让组件看上去好看一点,给组件添加了一点样式。

事件监听

现在我们需要通知父组件,当用户单击按钮时,用户点击了哪个按钮。

我们需要为每个按钮添加一个事件监听器。v-on指令允许侦听DOM事件。在本例中,我将使用v-on的快捷键来侦听单击事件。

为了通知父节点,我们将使用$emit方法来发出一个带有页面点击的事件。

我们还要确保分页按钮只有在页面可用时才唯一一个当前状态。为了这样做,将使用v-binddisabled属性的值与当前页面绑定。我们还是使用:v-bind的快捷键:

为了保持我们的template干净,将使用computed属性来检查按钮是否被禁用。使用computed也会被缓存,这意味着只要curr

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/create-pagination-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部