vue中使用分页插件vuejs-paginate

r囧r小猫 2022-04-10 07:21 742阅读 0赞

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>

运行效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWp1bm5h_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpZWp1bm5h_size_16_color_FFFFFF_t_70]: /images/20220402/0f45533e8f864abeaaa9e9ac49172874.png