vue封装分页组件

介绍

如题，一个vue项目经常要用到分页，所以封装成组件，方便复用

此组件很简单，大佬请自行忽略；网上很多都是vue + elementUI封装，也有的使用了vuex，本项目环境：nodejs版本 -6.9.0，vue版本-2.9.6

在线预览

源码：vue-pagination

效果图

演示流程：

克隆项目代码到本地
在项目目录下执行npm install
执行npm run dev
打开浏览器，输入http://localhost:8080即可预览

前几页效果

前几页

中间几页效果

中间几页

最后几页效果

最后几页

使用

分页组件引用只需在template和script中添加代码

template部分

在你想展示分页组件的位置添加：

1
<pagination :num="num" :limit="limit" @getNew="getNew"></pagination>

script部分

首先，在script中引入项目pagination.vue文件，代码：

1
import pagination from "./pagination.vue"

然后script的export default里面添加下列代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
data() {

     return {

       num: 0,

       limit: 10,

       currentList: []

       }

      },

components: {

    pagination

    },

methods: {

    getNew(value) {

        this.currentList = this.activityList.slice(value, value + this.limit);

        }

       },

mounted() {

    this.getNew(0);

       this.num = this.activityList.length;

      }

最后，请修改脚本中activityList为你自己需要分页的数组名，同时在v-for的位置修改为v-for="xxx in currentList"

至此，组件已经引用完毕，具体样式可以根据需要自行修改