基于vue实现分页/翻页组件paginator

xuexiangjys 发布于2019-08-21 11:31 / 1284人阅读

摘要：项目背景做列表页时不可避免会用到分页亲爱的们啊现在发放福利喽直接安装使用还有木有更方便的了哈哈这是一个基于的组件话不多说直接开撸地址当页数小于包括页页数大于页首页或尾页页之内显示正在研究怎么做出一个发布到网上后续会发地址安装传

项目背景

做列表页时,不可避免会用到分页,亲爱的们啊,现在发放福利喽!
npm直接安装使用,还有木有更方便的了,O(∩_∩)O哈哈~
这是一个基于vue的paginator组件,话不多说,直接开撸github地址: vue-paginator-simple

demo img

当页数小于999(包括999)页

页数大于999页

首页或尾页disabled

10页之内显示

正在研究怎么做出一个demo发布到网上,后续会发demo地址

npm安装

npm install vue-paginator-simple --save-dev

Props传参

pageCount //总页数

[initPage] //初始页,选填(场景举例: URL直接指向第三页)

Event监听事件

@togglePage //切换页面,本组件会返回当前点击的页数

Usage用法

Code源码 vue-paginator-simple 分页组件 paginator.vue

海外云主机私有云 Vue实现分页 pagination分页 vue组件 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86810.html

Graphql实践——像axios一样使用Graphql

摘要：初始化项目使用初始化项目安装项目结构如下接口所有接口对封装接下来对进行封装，加上中间件实现类似于拦截器的效果。 Graphql尝鲜在只学习graphql client端知识的过程中，我们常常需要一个graphql ide来提示graphql语法，以及实现graphql的server端来进行练手。graphql社区提供了graphiql让我们使用 graphiql (npm)：一个交互...

mumumu 2019-08-22 18:24 评论0 收藏0
基于vue实现swipe轮播组件

摘要：项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如。此处应该有掌声，哈哈简而言之，就是当需要一个简单的轮播时，可以选用，自己写一个组件。举个栗子，就是我实现的这个基于实现分页组件，移动端和端均适用哦。项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式，比如这样的showImg(ht...

Enlightenment 2019-08-22 10:42 评论0 收藏0
基于 Vue 实现的移动端图片轮播组件.

摘要：基于的移动端的图片轮播组件之前一直在用功能很齐全但是唯一的问题就是体积比较大我只是想要一个简单的图片轮播但是却要引入多大小的文件这样是不对的特点支持自动播放无限轮播效果支持用户手动滑动压缩后大概使用在入口文件中引入暂时不支持单组 wc-swiper 基于 Vue 的移动端的图片轮播组件. why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积...

hsluoyz 2019-08-20 18:52 评论0 收藏0
Web 前端单元测试到底要怎么写？看这一篇就够了

摘要：随着应用的复杂程度越来越高，很多公司越来越重视前端单元测试。最后我们可以利用覆盖率来看下用例的覆盖程度是否足够一般来说不用刻意追求，根据实际情况来定单元测试是测试驱动开发的基础。随着 Web 应用的复杂程度越来越高，很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用，但在实际项目中单元测试要怎么下手？测试用例应该包含哪...

lastSeries 2019-08-23 10:49 评论0 收藏0