❤
npm
Sign UpSign In

vuejs-pagination

1.1.2 • Public • Published

Vue Pagination

vue分页组件, 同时支持数据缓存

Vue.js (基于 2.1.0)

demo

安装

npm install vuejs-pagination --save-dev

基本用法

<body id="app">
    <pagination
        :page-num="pageNum"            //总页码， 必须
        :current-page="activePage"    //当前页， 必须
        @change="val=>currentPage = val">        //触发事件, 必须
    </pagination>
</body>
import Pagination from 'vuejs-pagination'
new Vue({
    el: '#app',
    data:function() {
        return{
            pageNum : 1, //总页数， 默认1
            activePage : 1 //当前页， 默认1
        }
    }
})

高级用法

缓存功能

<pagination
    :types="types"                 //该接口类型
    :cache-list="list"             //需要缓存的内容
    :page-num="pageNum"            //总页码
    :current-page="activePage"     //当前页
    v-on:change="change">        //页码变化触发事件
</pagination>
//翻页后请求接口前， 先获取缓存数据， 如果没有， 再调用接口
methods: {
    change : function(){
        this.$nextTick(() => {
            const cache = this.$refs.page.getCache();
            if (cache) {
                this.list = cache;
                return;
            }
            $.ajax({
                url : 'xxx'
            })
        }
    }
}

Options

Name Default Required Description
page-num 1 true 总页码
current-page 1 true 当前页
page-size 5 false 显示几个页码，需大于3
go-btn true false 是否展示跳页按钮
cache-list false 需要缓存的数据
types false 需要缓存数据的类型

Emit

Name Params Required Description
change val(点击的哪页) true 当点击其他页时，会触发该方法

Readme

Keywords

none

Package Sidebar

Install

npm i vuejs-pagination

Weekly Downloads

3

Version

1.1.2

License

none

Last publish

Collaborators

  • braisedcakes
Try on RunKit
Report malware