vue分页组件

2019年8月31日 182次阅读 来源: 枫言风语 
近来在做系统治理背景的需求，用了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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞