vue中使用分页插件vuejs-paginate

1.安装依赖库（需要用到bootstrap的css样式）及分页插件（vuejs-paginate）

npm install bootstrap@3.3.0 -–save-dev
npm install vuejs-paginate --save

2.封装此分页插件，根据自己需要的功能封装，调用起来会更简洁

<template>
  <div class="paginate_container">
    <paginate
      :page-count="pageCount"
      :margin-pages="marginPages"
      :page-range="rangePage"
      :initial-page="initPage"
      :click-handler="pageEvent"
      prev-text="上一页"
      next-text="下一页"
      :container-class="'pagination'"
      :page-class="'page-item'"
      :page-link-class="'page-link-item'"
      :prev-class="'prev-item'"
      :prev-link-class="'prev-link-item'"
      :next-class="'next-item'"
      :next-link-class="'next-link-item'"
    ></paginate>
  </div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import paginate from "vuejs-paginate"
export default {
    props:{
        pageCount:Number,
        marginPages:Number,
        rangePage:Number,
        initPage:Number,
    },
  components: { paginate },
  },
  methods: {
    pageEvent: function(e) {
      console.log(e);
      this.$emit("pageEvent", e); //将值放在自定义的事件函数中作为参数
    }
  }
};
</script>
<style scoped>
.paginate_container {
  /* widows: 100%;
  height: 20px; */
  /* display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center; */
}

.page-item {
}
.page-link-item {
}
.prev-item {
}
.prev-link-item {
}
.next-item {
}
.next-link-item {
}
</style>

3.父组件中调用封装的组件

<template>
  <div class="hello">
  <cpaginate
   :pageCount="pageCount" 
   :marginPages="marginPages" 
   :rangePage="rangePage" 
   :initPage="initPage" 
   @pageEvent="pageEvent">
   </cpaginate>
  </div>
</template>

<script>
import cpaginate from './customPaginate'
export default {
  components:{cpaginate},
  data () {
    return {
      pageCount:20,
      marginPages:2,
      rangePage:5,
      initPage:0,
    }
  },
  methods:{
    pageEvent:function(e){
      console.log(e)
    }
  }
}
</script>
<style scoped>
.demo{
}
</style>

运行效果