drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Page UI

Browse source 
add Page UI
This commit is contained in:
梁灏 2016-09-23 10:57:56 +08:00
parent f30c267565
commit 93064e3b74
8 changed files with 284 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/page/page.vue
View file

@ -4,9 +4,9 @@
title="上一页"
:class="prevClasses"
@click="prev">
<a>←</a>
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li>
<div :title="current + '/' + allPages">
<div :class="simplePagerClasses" :title="current + '/' + allPages">
<input
type="text"
:value="current"
@ -20,7 +20,7 @@
title="下一页"
:class="nextClasses"
@click="next">
<a>→</a>
<a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
</li>
</ul>
<ul :class="wrapClasses" v-else>
@ -31,22 +31,22 @@
title="上一页"
:class="prevClasses"
@click="prev">
<a>←</a>
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li>
<li title="第一页" :class="[`${prefixCls}-item`,{[`${prefixCls}-item-active`]: current == 1}]" @click="changePage(1)"><a>1</a></li>
<li title="向前 5 页" v-if="current - 3 > 1" :class="[`${prefixCls}-item-jump-prev`]" @click="fastPrev"><a>…</a></li>
<li title="向前 5 页" v-if="current - 3 > 1" :class="[`${prefixCls}-item-jump-prev`]" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
<li :title="current - 2" v-if="current - 2 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
<li :title="current - 1" v-if="current - 1 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
<li :title="current" v-if="current != 1 && current != allPages" :class="[`${prefixCls}-item`,`${prefixCls}-item-active`]"><a>{{ current }}</a></li>
<li :title="current + 1" v-if="current + 1 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
<li :title="current + 2" v-if="current + 2 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
<li title="向后 5 页" v-if="current + 3 < allPages" :class="[`${prefixCls}-item-jump-next`]" @click="fastNext"><a>…</a></li>
<li title="向后 5 页" v-if="current + 3 < allPages" :class="[`${prefixCls}-item-jump-next`]" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
<li :title="'最后一页:' + allPages" :class="[`${prefixCls}-item`, {[`${prefixCls}-item-active`]: current == allPages}]" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
<li
title="下一页"
:class="nextClasses"
@click="next">
<a>→</a>
<a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
</li>
<Options
:show-sizer="showSizer"
@ -125,6 +125,9 @@
`${prefixCls}-simple`
]
},
simplePagerClasses () {
return `${prefixCls}-simple-pager`;
},
wrapClasses () {
return [
`${prefixCls}`,