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开发的分页js组件的更多相关文章

  1. vue2.0 开发实践总结之入门篇

    vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...

  2. vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件

    vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB ...

  3. [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程

    在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli  安装vue命令行工具 2,vue init webpack vue-demo   使用v ...

  4. vue2.0 + element-ui2实现分页

    当我们向服务端请求大量数据的时候,并要在页面展示出来,怎么办?这个时候一定会用到分页. 本次所使用的是vue2.0+element-ui2.12实现一个分页功能,element-ui这个组件特别丰富, ...

  5. Vue2.0源码学习(3) - 组件的创建和patch过程

    组件化 组件化是vue的另一个核心思想,所谓的组件化就,就是说把页面拆分成多个组件(component),每个组件依赖的css.js.图片等资源放在一起开发和维护.组件是资源独立的,在内部系统中是可以 ...

  6. vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递

    1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...

  7. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...

  8. [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程

    我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandl ...

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

    导入自定义组件时出现了如下错误 ERROR Failed to compile with 1 errors 12:35:41 This dependency was not found: * comp ...

随机推荐

  1. Ubuntu16.04 install OpenJDK8

    1.按Ctrl + Alt + T打开终端.打开后,运行下面的命令来添加PPA:sudo add-apt-repository ppa:openjdk-r/ppa2.之后,更新系统包缓存并安装Open ...

  2. Vue实现勾选后向数组都添加

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. springboot与thrift集成实现服务端和客户端

    我们这里用一个简单的小功能来演示一下如何使用springboot集成thrift 这个功能是,判断hdfs路径存在. 1.先解决依赖 <dependencies> <dependen ...

  4. Lavarel artisan 命令

    [alex@iZ25c5aeyiiZ yiqizou3.0]# php artisan list Laravel Framework version Usage: command [options] ...

  5. 类的封装（property）

    封装 封装程序的主要原因:保护隐私:而封装方法的主要原因是:隔离复杂的执行过程 property的特性 将一个类的函数定义成特性以后,对象再去使用的时候obj.name,根本无法察觉自己的name是执 ...

  6. java将map拼接成“参数=值&参数=值”

    Java将Map拼接成"参数=值&参数=值" 把一个map的键值对拼接成"参数=值&参数=值"即"username=angusbao& ...

  7. JAVA基础知识总结：四

    一.方法 1.什么是方法? 对于功能相同的代码段,为了简化代码,会把功能相同的代码抽取出来,方便多次使用,Java中,我们使用[方法],也被称为函数 2.函数的声明 语法: 访问权限修饰符 其他修饰符 ...

  8. MySQL复制之实践篇

    本文主要以"一个主库,两个备库"代表"一个主库,多个备库"的拓扑结构来展示MySQL复制的实践过程. 拓扑结构: 主库创建复制账号: grant replica ...

  9. 机器学习之决策树（ID3 、C4.5算法）

    声明:本篇博文是学习<机器学习实战>一书的方式路程,系原创,若转载请标明来源. 1 决策树的基础概念 决策树分为分类树和回归树两种,分类树对离散变量做决策树 ,回归树对连续变量做决策树.决 ...

  10. 2017上海QCon之旅总结（中）

    本来这个公众号的交流消息中间件相关的技术的.上周去上海参加了QCon,第一次参加这样的技术会议,感受挺多的,所以整理一下自己的一些想法接公众号和大家交流一下. 三天的内容还挺多的,原计划分上下两篇总结 ...