ph-pager v0.1.1-beta.0

vue-template

Project setup

npm install ph-pager

Compiles and hot-reloads for development

import PhPager from 'ph-pager'
const PageSizeOptions:number[] = [10,20,30,50,100];
interface Pager{
    theme:string,<black|dark|light|primary|success|danger|warning>
    "show-total":{type:Boolean,default:false},
    "show-pagesize":{type:Boolean,default:false},
    "show-jump":{type:Boolean,default:false},
    "pagesize-options":{
        type:Array,
        default:()=>PageSizeOptions
    },
    justify:{type:String,default:"flex-start"},
    prev:{type:String,default:"上一页"},
    next:{type:String,default:"下一页"},
    pagesize:{type:Number,default:10},
    total:{type:Number,default:100},
    page:{type:Number,default:1},
    simple:{type:Boolean,default:false},

    @page //分页点击事件
}

<div class="divider">默认:page="page" :total="total"</div>
<ph-pager
    :theme="theme"
    :page="page"
    :total="total"
    @page="onPage"
></ph-pager>

<div class="divider">justify=[参考flex：content-justify选项]</div>
<ph-pager
    :theme="theme"
    justify="flex-end"
    :page="page"
    :total="total"
    @page="onPage"
></ph-pager>

<div class="divider">simple</div>
<ph-pager
    :theme="theme"
    :page="page"
    :total="total"
    @page="onPage"
    :simple="true"
></ph-pager>

<div class="divider">show-total</div>
<ph-pager
    :theme="theme"
    :page="page"
    :total="total"
    @page="onPage"
    :show-total="true"
></ph-pager>

<div class="divider">show-pagesize :默认【10，20，30，50，100】</div>
<ph-pager
    :theme="theme"
    :page="page"
    :total="total"
    @page="onPage"
    :show-total="true"
    :show-pagesize="true"
></ph-pager>

<div class="divider">pagesize-options= 【3，6，10】自定义</div>
<ph-pager
    :theme="theme"
    :page="page"
    :total="total"
    @page="onPage"
    :show-total="true"
    :show-pagesize="true"
    :pagesize-options="[3, 6, 10]"
></ph-pager>

<div class="divider">接上：pagesize:6，指定默认页大小</div>
<ph-pager
    :theme="theme"
    :page="page"
    :total="total"
    @page="onPage"
    :show-total="true"
    :show-pagesize="true"
    :pagesize-options="[3, 6, 10]"
    :pagesize="pagesize"
></ph-pager>

<div class="divider">show-jump:输入跳转页</div>
<ph-pager
    :theme="theme"
    :page="page"
    :total="total"
    @page="onPage"
    :show-total="true"
    :show-pagesize="true"
    :pagesize-options="[3, 6, 10]"
    :pagesize="pagesize"
    :show-jump="true"
></ph-pager>

文档案例

See 在线案例.