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 相关文章推荐
javascript事件模型实例分析
Jan 30 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
JavaScript Split()方法
Dec 18 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
浅谈Vue的响应式原理
May 30 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 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 魔术函数使用说明
2010/05/14 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python中的字典操作及字典函数
2018/01/03 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python获取中文字符串长度的方法
2018/11/14 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
护士的自我鉴定
2014/02/07 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
社区两委对照检查材料
2014/08/23 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang