基于Vue2.0的分页组件

本文实例为大家分享了Vue2.0分页组件的具体实现代码，供大家参考，具体内容如下

整个示例打包了，有需要的可以下载，有不对的地方欢迎指出：vue分页组件

组件部分代码：

Vue.component('zpagenav', {
 template: `<nav class="zpagenav">` +
     `<ul class="page-ul">` +
      `<li v-bind:key="index" v-for="(item,index) in pageList" v-bind:class ="item.class" @click.stop="setPage(item)" v-html="item.html">` +
      `</li>` +
     `</ul>` +
     `<span class="total">共 {{total}} 条</span>` +
    `</nav>`,
 props: {
  prevHtml: String,
  nextHtml: String,
  page: Number,
  total: Number,
  pageSize: Number,
  maxPage: Number
 },
 computed: {
  pageList: function () {
   var _this = this, pageList = [];
   let pageCount = Math.ceil(_this.total / _this.pageSize);
   let page = _this.page;
   let prevHtml = _this.prevHtml ? _this.prevHtml : '<';
   let nextHtml = _this.nextHtml ? _this.nextHtml : '>';
   let maxPage = _this.maxPage ? _this.maxPage : 9; 

   let hasPrev = page > 1;
   let hasNext = page < pageCount; 

   //上一页
   pageList.push({
    class: hasPrev ? '' : 'disabled',
    page: hasPrev ? page - 1 : page,
    html: prevHtml
   }); 

   //首页
   pageList.push({
    class: page == 1 ? 'active' : '',
    page: 1,
    html: 1
   }); 

   var p0 = Math.floor(maxPage / 2);
   var p1 = 1 + 2 + p0; //首页+省略至少2个页码+中间页面数的一半 

   var start, end;
   if (page >= p1) {
    start = page - p0;
    //前置省略号
    pageList.push({
     class: 'dot',
     page: page,
     html: '...'
    });
   } else {
    start = 2;
   } 

   var p2 = page + p0;
   if (p2 < pageCount) {
    end = p2;
   } else {
    end = pageCount - 1;
   } 

   //页码列表
   for (let i = start; i <= end; i++) {
    pageList.push({
     class: page == i ? 'active' : '',
     page: i,
     html: i
    });
   } 

   if (end < pageCount - 1) {
    //后置省略号
    pageList.push({
     class: 'dot',
     page: page,
     html: '...'
    });
   } 

   //尾页
   if (pageCount > 1) {
    pageList.push({
     class: page == pageCount ? 'active' : '',
     page: pageCount,
     html: pageCount
    });
   } 

   //下一页
   pageList.push({
    class: hasNext ? '' : 'disabled',
    page: hasNext ? page + 1 : page,
    html: nextHtml
   }); 

   return pageList;
  }
 },
 methods: {
  setPage: function (item) {
   if (item.class == '') {
    this.$emit('pagehandler', item.page);
   }
  }
 }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue.js制作分页组件

    学习了vue.js一段时间,拿它来做2个小组件,练习一下. 我这边是用webpack进行打包,也算熟悉一下它的运用. 源码放在文末的 github 地址上. 首先是index.html <!DOCTYPE html> <html> <head> <title>Page</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'O

  • Vue组件BootPage实现简单的分页功能

    Vue组件BootPage实现简单的分页功能

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介  其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样

  • 基于Vue如何封装分页组件

    基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

  • Vue分页组件实例代码

    Vue分页组件实例代码

    当前组件依赖bootstrap样式,使用前请先引用相关css. Vue.component('pagination', { template: `<nav aria-label="Page navigation"> <ul class="pagination"> <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click

  • 一个可复用的vue分页组件

    不废话,先上组件文件pages.vue: <template> <div class="pages-box" v-if="pageTotal > 0"> <ul class="pages"> <li class="pages-prev"> <a v-if="pageNow != 1" href="javascript:void(0);&q

  • Vue.js实现一个自定义分页组件vue-paginaiton

    Vue.js实现一个自定义分页组件vue-paginaiton

    vue实现一个分页组件vue-paginaiton vue使用了一段时间的感触就是,我再也不想直接操作DOM了.数据绑定式的编程体验真是好.实现的一个分页组件. 这里的css就不放出来了,可以看直接去github上下载:vue-pagination 先上一张实例图吧 模版 <div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on:click="cur-

  • 基于Vue.js的表格分页组件

    一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-

  • 基于vue2的table分页组件实现方法

    本文实例为大家分享了vue2 table分页组件的具体代码,供大家参考,具体内容如下 pagination.js: (function(){ var template = '<div class="page-bar" > \ <div class="info">{{info}}</div>\ <div class="showpages">每页<select class="showpa

  • vue分页组件table-pagebar使用实例解析

    vue分页组件table-pagebar使用实例解析

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作主要是基于java的服务端开发工作,对前端框架和组件的理解,不够深入,借此来记录在前端框架使用和构建中的点点滴滴. 此分页组件参照于bootstrap-datatable底部分页开发完成,相关参数增加自定义功能. 最终使用展现效果图如下,数据来源于cnodejs[https://cnodejs.or

  • 基于Vue2.0的分页组件

    基于Vue2.0的分页组件

    本文实例为大家分享了Vue2.0分页组件的具体实现代码,供大家参考,具体内容如下 整个示例打包了,有需要的可以下载,有不对的地方欢迎指出:vue分页组件 组件部分代码: Vue.component('zpagenav', { template: `<nav class="zpagenav">` + `<ul class="page-ul">` + `<li v-bind:key="index" v-for="

  • vue2.0实现分页组件的实例代码

    vue2.0实现分页组件的实例代码

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template> <nav> <ul class="pagination"> <li :

  • 基于vue2.0实现仿百度前端分页效果附实现代码

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前设定哪些参数需要暴露出来给父组件传递 <Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jum

  • 基于vue2.0+vuex的日期选择组件功能实现

    基于vue2.0+vuex的日期选择组件功能实现

    calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--

  • 基于vue2.0动态组件及render详解

    如下所示: <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>这里是Boor</h2> <component v-bind:my-data="items" v-bind:is="currentView"> <!-- 组件在 vm.currentview 变化时改变! --> </compo

  • 基于vue2.0的活动倒计时组件countdown(附源码下载)

    基于vue2.0的活动倒计时组件countdown(附源码下载)

    这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数.   查看演示       下载源码 安装 npm install vue2-countdown --save 使用组件 首先在模板部分添加: <template> <div> <count-down v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDown

  • 详解Weex基于Vue2.0开发模板搭建

    详解Weex基于Vue2.0开发模板搭建

    前言 最近有一些人反馈说在面试过程中常常被问到weex相关的知识,也侧面反映的weex的发展还是很可观的,可是目前weex的开发者大多数是中小型公司或者个人,大公司屈指可数,揪其原因可能是基于weex的开发正确的姿势大家并没有找到,而且市面上的好多轮子还是.we后缀的,众所周知,weex和vue一直在努力的进行生态互通,而且weex实现web标准化是早晚的问题,今天和大家分享一下weex基于vue2.0的开发框架模板~ 工作原理 先简单熟悉一下weex的工作原理,这里引用一下weex官网上的一直

  • 基于vue实现swipe分页组件实例

    基于vue实现swipe分页组件实例

    项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如 Swiper . 但是当我们项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个 110k 的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了, thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有 14.2k ,真真的 轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)

随机推荐