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 EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
layui使用templet格式化表格数据的方法
Sep 16 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
浅谈discuz密码加密的方式
2014/05/22 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
js滚动条多种样式,推荐
2007/02/05 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
gearman的安装启动及python API使用实例
2014/07/08 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python中退出多层循环的方法
2018/11/27 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
会计试用期自我评价
2015/03/10 职场文书
同学聚会通知短信
2015/04/20 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书