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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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处理Oracle的CLOB实例
2014/11/03 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP排序算法类实例
2015/06/17 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
JS获取后台Cookies值的小例子
2013/03/04 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
canvas的神奇用法
2017/02/03 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
express.js中间件说明详解
2019/03/19 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python Django批量导入数据
2016/03/25 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
进修护士自我鉴定
2013/10/14 职场文书
英文导游欢迎词
2014/01/11 职场文书
家具促销活动方案
2014/02/16 职场文书
保护野生动物倡议书
2014/05/16 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
英语演讲开场白
2015/05/29 职场文书
幸福终点站观后感
2015/06/04 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis