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

前端之家收集整理的这篇文章主要介绍了vue中的自定义分页插件组件的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

首先在新建一个分页模块

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

template中

  • 共{{datanum}}条记录 第 {{cur}} / {{all}} 页
  • //点击上一页
  • //点击第一页时显示
  • //页码
  • //点击下一页
  • //点击最后一页时显示
  • {{all}}页 // 共有多少页
  • style中的内容

    .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

    }

    },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
    }

    }

    }

    父级的组件内容

    //这是我自己设置的,可以根据情况不用设置不同的样式
    函数,来获取自己传值到父级的值 atanum="num" :dataDatanum="datanum" @change="pageChange">

    最后重新保存,重新运行

    注意

    可以根据自己喜好来自己动手做一个分页,我在其它人的基础之上添加页码以及当前页面数,也可以添加跳转的页数(暂时没有做),也可以更改css样式来改变!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的Vue相关文章