Neutrino Packing Machine

    @livelybone/vue-pagination

    1.5.1 • Public • Published

    @livelybone/vue-pagination

    NPM Version Download Month gzip with dependencies: 1.5kb pkg.module

    pkg.module supported, which means that you can apply tree-shaking in you project

    A vue pagination component

    repository

    https://github.com/livelybone/vue-pagination.git

    Demo

    https://livelybone.github.io/vue/vue-pagination/

    Installation

    npm i -S @livelybone/vue-pagination

    Global name

    Pagination

    Usage

    // import all
    import Pagination from '@livelybone/vue-pagination';
    
    // Global register
    Vue.component('pagination', Pagination);
    
    // Local register
    new Vue({
      components:{Pagination}
    })

    Use in html, see what your can use in CDN: unpkg

    <-- use what you want -->
    <script src="https://unpkg.com/@livelybone/vue-pagination/lib/umd/<--module-->.js"></script>

    Props

    Common

    Name Type DefaultValue Description
    noPage Boolean false If you don't know the count of total pages, you should set this to true
    config Object defaultConfig¦noPageConfig If noPage is false, the defaultValue is defaultConfig, otherwise, the defaultValue is noPageConfig
    input Object inputConfig The input config
    turnBtns Object turnBtns The prev-or-next button text config
    /**
     * @attr {Number} pages, the count of total pages
     * @attr {Number} page, the index of current page 
     * @attr {Number} pageSize, the size of per page 
     * @attr {Number} maxPageBtn, the max number of page buttons 
     * */
    const defaultConfig = {
      pages: 1,
      page: 1,
      pageSize: 10,
      maxPageBtn: 7,
    }
    
    /**
     * @attr {Number} page, the index of current page 
     * @attr {Number} pageSize, the size of per page 
     * @attr {Number} currentPageSize, the size of current page 
     * */
    const noPageConfig = {
      page: 1,
      pageSize: 10,
      currPageSize: 10,
    }
    
    /**
     * @attr {Boolean} enable, if use input tag or not 
     * @attr {String} text, the label text of input tag
     * @attr {Number} debonceTime, the debonce time to trigger event `to`
     * */
    const inputConfig = {
      enable: true,
      text: 'Go to',
      debonceTime: 500,
    }
    
    /**
     * @attr {String} prev, the text of prev button
     * @attr {String} next, the text of next button
     * */
    const turnBtns = {
      prev: '<',
      next: '>',
    }

    Events

    Name EmittedData Description
    to Number

    style

    For building style, you can use the css or scss file in lib directory.

    // scss
    import 'node_modules/@livelybone/vue-pagination/lib/css/index.scss'
    
    // css
    import 'node_modules/@livelybone/vue-pagination/lib/css/index.css'

    Or

    // scss
    @import 'node_modules/@livelybone/vue-pagination/lib/css/index.scss';
    
    // css
    @import 'node_modules/@livelybone/vue-pagination/lib/css/index.css';

    Or, you can build your custom style by copying and editing index.scss

    Install

    npm i @livelybone/vue-pagination

    DownloadsWeekly Downloads

    4

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    20.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • livelybone