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 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
JS自动生成动态HTML验证码页面
Jun 14 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
Vue三层嵌套路由的示例代码
May 05 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
详解JavaScript中的this指向问题
Feb 05 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
php中几种常见安全设置详解
2010/04/06 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
理解python正则表达式
2016/01/15 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python设置表格边框的具体方法
2020/07/17 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
Why do we need Unit test
2013/01/03 面试题
院药学专业个人求职信
2013/09/21 职场文书
医药销售求职信范文
2014/02/01 职场文书
个人实习生的自我评价
2014/02/16 职场文书
对公司合理化的建议书
2014/03/12 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
Pandas自定义选项option设置
2021/07/25 Python