正文

采用vue2.0开发的分页js组件

暴脾气大大  2022-02-14  627

关键词：

2017-11-17 19:14:23

基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js

由于项目需求，要求使用 Vue2.0 开发一套有关分页的组件

这款 pagination.js 组件，可以按照各自需求定制，以下代码可以直接复制引入项目中

// 1、Vue写的分页有两个参数

// pages：总页数，pageNo：当前页

// 直接上代码，考虑到兼容 IE 等浏览器，其中 template 直接使用字符串拼接方式

 1 /**
 2  * author: tyd
 3  * createTime: 2017/11/13
 4  * title: 分页组件
 5  */
 6 var pageComponent = Vue.extend({
 7     template: '<nav aria-label="Page navigation">'+
 8                     '<ul class="pagination">'+
 9                         '<li :class="{\'disabled\':curPage==1}">'+
10                            '<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">'+
11                                 '<span aria-hidden="true">上一页</span>'+
12                            '</a>'+
13                        '</li>'+
14                        '<li v-for="page in showPageBtn" :class="{\'active\':page==curPage}">'+
15                             '<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>'+
16                              '<a href="javascript:;" v-else>···</a>'+
17                        '</li>'+
18                        '<li :class="{\'disabled\':curPage==pages}">'+
19                            '<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">'+
20                                    '<span aria-hidden="true">下一页</span>'+
21                            '</a>'+
22                         '</li>'+
23                         '<li :class="{\'disabled\':pages==pages}">'+
24                            '<a href="javascript:void(0);">'+
25                                     '共  {{pages}} 页'+
26                            '</a>'+
27                        '</li>'+
28                    '</ul>'+
29                '</nav>',
30     // 用户组件传递数据            
31     props: {
32         pages: {
33             type: Number,
34             default: 1
35         },
36         current: {
37             type: Number,
38             default: 1
39         }
40     },
41     data:function (){
42         return{
43             curPage:1
44         }
45     },
46     computed: {
47         // 显示分页按钮
48         showPageBtn:function() {
49             let pageNum = this.pages; // 总页数
50             let index = this.curPage; // 当前页
51             let arr = [];
52             if (pageNum <= 6) {
53                 for (let i = 1; i <= pageNum; i++) {
54                     arr.push(i)
55                 }
56                 return arr
57             }
58             // 对页码显示进行处理，动态展示
59             if (index <= 3) return [1, 2, 3, 4, 0, pageNum];
60             if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
61             if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum];
62             if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
63             return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum];
64         }
65     },
66     methods: {
67         goPage:function(page) {
68             if (page != this.curPage) {
69                 console.log(page);
70                 this.curPage = page;
71                 this.$emit('navpage', this.curPage);
72             }else{
73                 console.log('Already in the current page');
74             }
75         }
76     }
77 });
78 Vue.component('navigation', pageComponent); // 注册组件

// 2、简单的演示 Html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue2.0分页组件</title>
 6         <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
 7         <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
 8         <!-- 引入外部的 pagination.js 组件即可 -->
 9         <script type="text/javascript" src="pagination.js"></script>
10     </head>
11     <body>
12         <div id="app" class="text-right" style="text-align: center;">
13             <navigation :pages="pages" :current.sync="pageNo" @navpage="pageList"></navigation>
14         </div>
15         <script type="text/javascript">
16             new Vue({
17                 el: "#app",
18                 data: {
19                     pageNo: 1,
20                     pages: 100
21                 },
22                 methods: {
23                     pageList:function(curPage) {
24                         //根据当前页获取数据
25                         this.pageNo = curPage;
26                         console.log("当前页：" + this.pageNo);
27                     }
28                 }
29             })
30         </script>
31     </body>
32 </html>

演示：

vue2.0使用介绍(代码片段)

...用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态... 查看详情

vue2.0开发时导入组件时出错

导入自定义组件时出现了如下错误ERRORFailedtocompilewith1errors12:35:41Thisdependencywasnotfound:*components/star/starin./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/head 查看详情

超简单的vue2.0分页组件

1.组件代码<template><divclass="pagination_comment_style"style="width:100%;overflow:hidden"><ulclass="pagination"><li@click="goPage(pageIndex-1)"v-bind:class="{‘no-allow‘:1==pageIndex} 查看详情

基于angular的分页组件插件，使用directive，将directive的内容放到js文件中，直接引用即可

...angular的控制器写一些分页组件的交互就完成了一个基本的分页组件。但是这样对于用户来说操作过程过于繁琐，不仅要关心前端页面的书写，还要处理后台分页组件的逻辑。　　由于之前没有接触过自定义指令，所以去github上do... 查看详情

vue2.0+elementui实现表格翻页

...再传到前端即可。前端放置Pagination分页器，我这里直接采用了完整功能的分页器。<el-pagination @size-ch 查看详情

datagrid修改分页组件的分页提示信息为中文

datagrid修改分页组件的分页提示信息为中文by:授客QQ：1033553122 测试环境jquery-easyui-1.5.3 问题描述默认分页组件为英文展示，如下，希望改成中文展示解决方法1直接引入中文locale目录下的easyui-lang-zh_CN.js，引入... 查看详情

drf的分页组件，过滤组件(代码片段)

...好了分页功能，包括各种小问题的优化，已经能满足实际开发的需求。这里介绍了DRF的两种分页组件基础分页组件偏移分页组件1.分页组件的使用使用方法：类似DRF的序列化的使用方式1.新建一个pagination.py文件，自定义分页类#pag... 查看详情

vue2.0全局组件之pdf

...火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button>编写：template<template><d 查看详情

基于vue.js的表格分页组件

...写了一个凑合着用，或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能，我便在这里分享一下，大家自觉填坑咯。如需高大上的组件，可以移步Vue官方组件库：https://github.com/v 查看详情

vue2.0的通用组件

Element：一套通用组件库的开发之路Element是由饿了么UED设计、饿了么大前端开发的一套基于Vue2.0的桌面端组件库。今天我们要分享的就是开发Element的一些心得。官网：http://element.eleme.io/#/github：https://github.com/ElemeFE/element ... 查看详情

antd table 的分页道具

】antdtable的分页道具【英文标题】：paginationpropforantdtable【发布时间】：2018-08-1819:21:22【问题描述】：我正在使用来自antd库的Table组件。我想将分页道具传递给Table组件。在文档中，它说传递指向Pagination组件本身的分页配置对象... 查看详情

饿了么基于vue2.0的通用组件开发之路（分享会记录）

vue2.0项目

...像乐高积木一样通过互相引用而组装起来 ?Vue2.0推荐开发环境?Homebrew1.0.6(Mac)、Node.js6.7.0、npm3.10.3、we 查看详情

vue2.0-1

续上一篇文章：vue2.0开发实践总结之入门篇，如果没有看过的可以移步看一下。本篇文章目录如下：1. vue组件的说明和使用2. vuex在实际开发中的使用3. 开发实践总结 1. vue组件的说明和使用一个组... 查看详情

vue2.0开发自己的ui组件库

vue2.0开发自己的UI组件库这是博主自己正在操刀的一款基于vue的UI框架vzer-ui大家喜欢的可以去github给一波关注。GitHub地址在线演示地址博主写的时候也不忘留下一个基础模板，供其他和我有共同兴趣的人一起研究下面是我的vzer-ui... 查看详情

vue2.0学习笔记之组件

...template模板子元素只能是一个。　　　　2. 组件名称采用横杠间隔命名时，第一个字母大写会报错。写法一：全局组件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"&g 查看详情

初识vue2.0：路由与组件

...是创建了一个简单的demo，并没有组件和路由功能，此次采用了webpack模版，自动生成组件和路由。^_^在模版初始化时，因为ESLint语法检查过于严格，可以暂时不要开启。vueinitwebpackmyapp?Installvue-router?Yes?UseESLinttolintyourcode?No?Setupunitt 查看详情

vue2.0项目calendar.js(日历组件封装)

最近一直闲来无事，便寻思着做一下自己的个人项目，也想说能使用现在比较流行的一些mvvm框架来做，于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做，做得也是多页面应用，使用vue-router，也是想说把多个功能模块... 查看详情