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 Ajax请求状态管理器打包
May 03 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
vue中render函数的使用详解
Oct 12 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
VUE实现移动端列表筛选功能
Aug 23 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
Protoss魔法科技
2020/03/14 星际争霸
DWZ刷新dialog解决方法
2013/03/03 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python中time库的实例使用方法
2019/10/31 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
yy婚礼司仪主持词
2014/03/14 职场文书
保险公司年会主持词
2014/03/22 职场文书
慰问信模板
2015/02/14 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
利用Python实现Picgo图床工具
2021/11/23 Python
Python日志模块logging用法
2022/06/05 Python