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动态分页效果堪比时光网
Sep 25 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 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之第七天
2006/10/09 PHP
在WIN98下以apache模块方式安装php
2006/10/09 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
php session处理的定制
2009/03/16 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
利用python求积分的实例
2019/07/03 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
妇产科护士自我鉴定
2013/10/15 职场文书
车间班组长的职责
2013/12/13 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
中学总务处工作总结
2015/08/12 职场文书
企业法人任命书
2015/09/21 职场文书