资讯专栏INFORMATION COLUMN

vue中的自定义分页插件组件

JaysonWang / 1354人阅读

摘要:介绍一下,已经有很多的分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章首先在新建一个分页模块在模块中引入相应的代码,内有详细的注释中共条记录第页点击上一页点击第一页时显示页码点击下一页点击最后一

介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章

首先在新建一个分页模块

在模块中引入相应的代码,(内有详细的注释)

template中

 
  • 共{{dataNum}}条记录 第 {{cur}} / {{all}} 页
  • <//点击上一页
  • <//点击第一页时显示
  • {{ index }}//页码
  • >//点击下一页
  • > //点击最后一页时显示
  • {{all}} // 共有多少页

style中的内容

 .page-bar {
   text-align: center;
   width: 100%;
   height: 36px;
   margin: 0 auto;
   position: relative;
 }

 .page-bar ul {
   min-width: 700px;
   display: block;
   overflow: hidden;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   }

.page-bar li {
   display: block;
   width: 36px;
   height: 36px;
   border-radius: 4px;
   list-style: none;
   overflow: hidden;
   position: relative;
   float: left;
   margin-left: 8px;
}
.page-bar .first{
   display: block;
   width: 170px;
   height: 36px;
   font-size: 14px;
   line-height: 36px;
   text-align: center;
}
.page-bar .last_li{
   width: 85px;
   height: 36px;
   border: 1px solid #ffffd;
}
.page-bar .last_li span{
    width: 100%;
   height: 100%;
   line-height: 36px;
   text-align: center;
   float: left;
}
.page-bar li:first-child {
   margin-left: 0px
}

.page-bar a {
   width: 34px;
   height: 34px;
   border: 1px solid #ffffd;
   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
       }

   }

}

父级的组件内容





最后重新保存,重新运行

   npm run dev
   

注意
1.可以根据自己喜好来自己动手做一个分页,我在其它人的基础之上添加了页码以及当前页面数,也可以添加跳转的页数(暂时没有做),也可以更改css样式来改变!
2.本人才疏学浅,请大家多多包涵!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52886.html

相关文章

  • vue的自定义分页插件组件

    摘要:介绍一下,已经有很多的分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章首先在新建一个分页模块在模块中引入相应的代码,内有详细的注释中共条记录第页点击上一页点击第一页时显示页码点击下一页点击最后一 介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 showImg(https://segmentfault.com/im...

    marek 评论0 收藏0
  • 手把手教你用原生JavaScript造轮子(1)——分页器(最后更新:Vue插件版本,本篇Over!

    摘要:使用构造函数那么有没有一种办法,可以不写函数名,直接声明一个函数并自动调用它呢答案肯定的,那就是使用自执行函数。 日常工作中经常会发现有大量业务逻辑是重复的,而用别人的插件也不能完美解决一些定制化的需求,所以我决定把一些常用的组件抽离、封装出来,形成一套自己的插件库。同时,我将用这个教程系列记录下每一个插件的开发过程,手把手教你如何一步一步去造出一套实用性、可复用性高的轮子。 So, ...

    CHENGKANG 评论0 收藏0
  • 一只高扩展性的vue组件库 —— JSMOD

    摘要:在开发面向用户站点时,通常由给出,这时需要组件库有丰富的自定义样式能力同时保留默认提供基础样基于这点再看大部分的中后台组件库并不能满足需求,为大家介绍一只高扩展性组件项目项目相关文档示例一句装的目标提供高自由度高扩展性的组件集合,并统一桌面 在开发面向用户站点时,UI 通常由 designer 给出,这时需要组件库有丰富的自定义样式能力(同时保留默认提供基础样) 基于这点再看大部分的中...

    HmyBmny 评论0 收藏0
  • Vue高效UI组件库—iView开发实践

    摘要:它的文档也是相当详细,每个功能都配有详细说明和实例代码,直接复制就可以使用,我们也计划在明年启动英文文档翻译计划。明年会启动英文文档翻译计划,也希望喜欢和支持,同时英语不错的同学可以加入我们,一起参与翻译。 前段时间在微软参加活动,分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验,现整理成文,和大家探讨。 showImg(htt...

    wean 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<