vue分页器组件编写方法详解


Posted in Javascript onJune 28, 2019

使用vue编写的分页器组件,支持输入页码跳转,效果如图:

1、点击前五页:

vue分页器组件编写方法详解

2、点击中间部分页面

vue分页器组件编写方法详解

3、点击第一页,上一页按钮失效,点击最后一页,下一页按钮失效

vue分页器组件编写方法详解

组件调用:

//html调用 参数:pageSize(总页数);pageNo(当前页)
<pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>

//组件引入
import pager from '../../component/pager/pager.vue'

//组件调用声明
components:{ pager}

//参数
data(){
 return {
  pageSize: 30,
  pageNo: 2
 }
}

//接收跳转事件
methods:{
 jump(id){
  console.log(id)
 },
}

组件编写

pager.vue:

<template>
 <div class="pager-wrapper" ref="pager">
  <div class="pager-box">
   <a class="pager-prev" :class="{'pager-disabled':prevDisable}" href="javascript:;" @click="jumpPrev()">上一页</a>
   <template v-for="i in pageSize">
    <span v-if="i==pageNo" class="pager-curr">
     <em class="pager-em"></em><em>{{i}}</em>
    </span>
    <a v-else-if="pageNo<5&&(i)<6" href="javascript:;" @click="jump(i)">
     {{i}}
    </a>
    <a v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2)" href="javascript:;" @click="jump(i)">
     {{i}}
    </a>
    <template v-else>
     <span v-if="pageNo<5&&i==6" class="pager-spr">…</span>
     <span v-if="pageNo==4&&i==7" class="pager-spr">…</span>
     <span v-if="pageNo>4&&i==pageNo-3" class="pager-spr">…</span>
     <span v-if="pageNo>4&&i==pageNo+3" class="pager-spr">…</span>
    </template>
   </template>
   <a class="pager-next" :class="{'pager-disabled':nextDisable}" href="javascript:;" @click="jumpNext()">下一页</a>
  </div>
  <div class="pager-input">
   <input type="text" v-model="jumpPage">
   <a class="pager-btn-go" href="javascript:;" @click="Go()">GO</a>
  </div>
 </div>
</template>
<script>
export default {
 model:{ //通过v-model传过来的参数
  prop: 'pageNo',
  event: 'jumpPage'
 },
 props:{
  pageSize:{
   type: Number,
   default: 1
  },
  pageNo:{ //通过v-model传过来的参数
   type: Number,
   default: 1
  }
 },
 data(){
  return {
   jumpPage:'' //避免操作props参数
  }
 },
 computed: {
  prevDisable: function(){ //“上一页”按钮是否可点
   if(this.pageNo > 1){
    return false;
   }else{
    return true
   }
  },
  nextDisable: function(){ //“下一页”按钮是否可点
   if(this.pageNo < this.pageSize && this.pageSize > 1){
    return false;
   }else{
    return true;
   }
  },
 },
 methods: {
  jumpPrev: function(){ //点击上一页
   if(this.pageNo == 1){
    return ;
   }else{
    this.$emit('jumpPage',this.pageNo-1);
    this.$emit('on-jump',this.pageNo-1);
   }
  },
  jumpNext: function(){ //点击下一页
   if(this.pageNo == this.pageSize){
    return ;
   }else{
    this.$emit('jumpPage',this.pageNo+1); //修改当前页码
    this.$emit('on-jump',this.pageNo+1); //跳转
   }
  },
  jump: function(id){ //直接跳转
   if(id>this.pageSize){ 
    id=this.pageSize;
   }
   this.jumpPage = '';
   this.$emit('jumpPage',id); //修改当前页码
   this.$emit('on-jump',id); //跳转
  },
  Go: function(){
   if(this.jumpPage==''){ //判空处理
    return ;
   }else if(/^\d*$/.test(parseInt(this.jumpPage))){ //填写数字才能跳转
    this.jump(parseInt(this.jumpPage));
    this.jumpPage = '';
   }else{
    this.jumpPage = '';
    return ;
   }
  }
 }
}
</script>

完整代码可下载:vue分页器组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
javascript表格的渲染组件
Jul 03 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
详解js的视频和音频采集
Aug 09 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
Vue分页器实现原理详解
Jun 28 #Javascript
vue实现分页栏效果
Jun 28 #Javascript
js实现简单分页导航栏效果
Jun 28 #Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 #Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 #Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 #Javascript
微信小程序身份证验证方法实现详解
Jun 28 #Javascript
You might like
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
JavaScript对象原型链原理详解
2020/02/05 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
《骑牛比赛》教后反思
2014/04/22 职场文书
世界遗产导游词
2015/02/13 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript