vue中的自定义分页插件组件的示例


Posted in Javascript onAugust 18, 2018

介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章

vue中的自定义分页插件组件的示例

vue中的自定义分页插件组件的示例

首先在新建一个分页模块

vue中的自定义分页插件组件的示例

在模块中引入相应的代码,(内有详细的注释)

template中

<div class="page-bar">
 <ul>
  <li class="first">
   <span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span>
  </li>
  <li v-if="cur>1">
   <a v-on:click="cur--,pageClick()"><</a>//点击上一页
  </li>
  <li v-if="cur==1">
   <a class="banclick"><</a>//点击第一页时显示
  </li>
  <li class="li_a" v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
   <a v-on:click="btnClick(index)">{{ index }}</a>//页码
  </li>
  <li v-if="cur!=all">
   <a v-on:click="cur++,pageClick()">></a>//点击下一页
  </li>
  <li v-if="cur == all">
   <a class="banclick">></a> //点击最后一页时显示
  </li>
  <li class="last_li">
   <span>共<i>{{all}}</i>页</span> // 共有多少页
  </li>
 </ul>
</div>

style中的内容

.page-bar a {
 width: 34px;
 height: 34px;
 border: 1px solid #ddd;
 text-decoration: none;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 /*margin-left: -1px;*/
 line-height: 34px;
 color: #333;
 cursor: pointer
}

.page-bar .li_a a:hover {
 background-color: #eee;
 border: 1px solid #40A9FF;
 color: #40A9FF;
}

.page-bar a.banclick {
 cursor: not-allowed;
}

.page-bar .active a {
 color: #fff;
 cursor: default;
 background-color: #1890FF;
 border-color: #1890FF;
}

.page-bar i {
 font-style: normal;
 color: #d44950;
 margin: 0px 4px;
 font-size: 14px;
}

script

export default {
 //显示的声明组件
 name: "paging",
 //从父级组件中传值过来的,你可以自己设置名字,但是需要跟父级传入的名字一致!
 props : ["dataAll","dataCur","datanum","dataDatanum"],
 

 data() {
  return {
   all: this.dataAll, //总页数
   cur: this.dataCur ,//当前页码
   num: this.datanum , //一页显示的数量 奇数
   dataNum: this.dataDatanum,//数据的数量
   
  }

 },
 watch: {
  cur: function(oldValue, newValue) {
  //父组件通过change方法来接受当前的页码
   this.$emit('change', oldValue)
   //这里是直接点击执行函数
  }
 },
 methods: {
  btnClick: function(data) { //页码点击事件
   if(data != this.cur) {
    this.cur = data
   }
  },
  pageClick: function() {
   console.log('现在在' + this.cur + '页');
   //父组件通过change方法来接受当前的页码
    //这里是点击下一页执行函数
   this.$emit('change', this.cur)
  }
 },

 computed: {
  indexs: function() {
   var left = 1;
   var right = this.all;
   var ar = [];
   if(this.all >= this.num ) {
    if(this.cur > 3 && this.cur < this.all - 2) {
     left = this.cur - (this.num-1)/2
     right = this.cur + (this.num-1)/2
    } else {
     if(this.cur <= 3) {
      left = 1
      right = this.num
     } else {
      right = this.all
      left = this.all - (this.num - 1);
     }
    }
   }
   while(left <= right) {
    ar.push(left)
    left++
   }
   return ar
  }

 }

}

父级的组件内容

<template>
//这是我自己设置的,可以根据情况不用设置不同的样式
  <div class="page">
  //这里时通过props传值到子级,并有一个回调change的函数,来获取自己传值到父级的值
  <paging :dataAll="all" :dataCur="cur" :datanum="num" :dataDatanum="dataNum" @change="pageChange"></paging>
 </div>
</template>
<style scoped>
 .page {
 width: 100%;
 min-width: 1068px;
 height: 36px;
 margin: 40px auto;
 }
</style>
<script>
import Paging from './paging'
export default {
 name: "homepage",
 components: {
  Paging
 },
 data() {
  return {
   all: 40, //总页数
   cur: 1, //当前页码
   num: 7, //一页显示的数量 必须是奇数
   dataNum: 400, //数据的数量
  }
 },
 methods: {
  //子级传值到父级上来的动态拿去
  pageChange: function(page) {
   this.cur = page
  }
 }
}
</script>

最后重新保存,重新运行

npm run dev

vue中的自定义分页插件组件的示例

注意

可以根据自己喜好来自己动手做一个分页,我在其它人的基础之上添加了页码以及当前页面数,也可以添加跳转的页数(暂时没有做),也可以更改css样式来改变!

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

Javascript 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
小程序实现留言板
Nov 02 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 #Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 #Javascript
在iFrame子页面里实现模态框的方法
Aug 17 #Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 #Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 #Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 #Javascript
Vue组件创建和传值的方法
Aug 17 #Javascript
You might like
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
多版本Python共存的配置方法
2017/05/22 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
django框架使用方法详解
2019/07/18 Python
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
建龙钢铁面试总结
2014/04/15 面试题
副总经理工作职责
2013/11/28 职场文书
学术会议主持词
2014/03/17 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
小学语文业务学习材料
2014/06/02 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
免职通知
2015/04/23 职场文书
Mysql数据库group by原理详解
2022/07/07 MySQL
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL