vue封装分页组件

如默

撰写于 2019年 07月 26 日

介绍

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

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

在线预览

源码：vue-pagination

效果图

演示流程：

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

前几页效果

中间几页效果

最后几页效果

使用

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

template部分

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

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

script部分

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

import pagination from "./pagination.vue"

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

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"

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