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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
原生js实现随机点名
2020/07/05 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python实现可变变量名方法详解
2019/07/01 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python实例化对象的具体方法
2020/06/17 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
新学期开学寄语
2014/01/18 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
单位作风建设自查报告
2014/10/23 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书