vue分页组件

2019年9月18日 244次阅读 来源: 枫言风语 
最近在做系统管理后台的需求，用了vue，体验还是挺好的，但是一直找不到一个比较好的分页组件，就自己整了一个。

使用的方法如下，只要传递一个total总页数，current当前页码，还有点击的回调函数就行了，回调函数的第一个参数会带上你点击的页码

<template>
  <div>
      <h2 style="text-align: center">现在是第{{current}}页</h2>
      <pagination :total="total" :current="current" :callback="changePage"></pagination>
  </div>
</template>

<script>
import pagination from './pagination/pagination.vue'
export default {
  data () {
    return {
      current:1,
      total:10
    }
  },
  components:{
    pagination
  },
  methods:{
    changePage:function(page){
      this.current = page;
      //分页操作这里
    }
  }
}
</script>

效果如下图
《vue分页组件》

这个分页组件依赖jquery,是在bootstrap.pagination.js的基础上面修改的，因为是pc管理端，对页面大小的要求不是很大。移动端可能不适合使用这个组件

默认每个分页li会带上button类名，点击态会带上is-primary的类名，需要修改可以去改动pagination.js的设置

项目git地址vue分页组件

欢迎大家使用交流

    原文作者：枫言风语
    原文地址: https://segmentfault.com/a/1190000007907914
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞