Page add prev-text and next-text prop

This commit is contained in:
梁灏 2018-06-22 11:02:07 +08:00
parent 1a4a76e903
commit ac50d539aa
3 changed files with 20 additions and 5 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<Page :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page> <Page prev-text="上一页" next-text="下一页" :total="total" show-sizer show-elevator show-total transfer :current.sync="current"></Page>
{{ current }} {{ current }}
<Button type="primary" @click="subject">- 1</Button> <Button type="primary" @click="subject">- 1</Button>
<Button type="primary" @click="change">Change</Button> <Button type="primary" @click="change">Change</Button>

View file

@ -33,7 +33,7 @@
:title="t('i.page.prev')" :title="t('i.page.prev')"
:class="prevClasses" :class="prevClasses"
@click="prev"> @click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a> <a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li> </li>
<li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li> <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
<li :title="t('i.page.prev5')" v-if="currentPage - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li> <li :title="t('i.page.prev5')" v-if="currentPage - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
@ -48,7 +48,7 @@
:title="t('i.page.next')" :title="t('i.page.next')"
:class="nextClasses" :class="nextClasses"
@click="next"> @click="next">
<a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a> <a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
</li> </li>
<Options <Options
:show-sizer="showSizer" :show-sizer="showSizer"
@ -132,6 +132,14 @@
}, },
styles: { styles: {
type: Object type: Object
},
prevText: {
type: String,
default: ''
},
nextText: {
type: String,
default: ''
} }
}, },
data () { data () {
@ -188,7 +196,8 @@
return [ return [
`${prefixCls}-prev`, `${prefixCls}-prev`,
{ {
[`${prefixCls}-disabled`]: this.currentPage === 1 [`${prefixCls}-disabled`]: this.currentPage === 1,
[`${prefixCls}-custom-text`]: this.prevText !== ''
} }
]; ];
}, },
@ -196,7 +205,8 @@
return [ return [
`${prefixCls}-next`, `${prefixCls}-next`,
{ {
[`${prefixCls}-disabled`]: this.currentPage === this.allPages [`${prefixCls}-disabled`]: this.currentPage === this.allPages,
[`${prefixCls}-custom-text`]: this.nextText !== ''
} }
]; ];
}, },

View file

@ -103,6 +103,7 @@
&-item-jump-next { &-item-jump-next {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
user-select: none;
//float: left; //float: left;
min-width: @btn-circle-size; min-width: @btn-circle-size;
height: @btn-circle-size; height: @btn-circle-size;
@ -224,6 +225,10 @@
padding: 0 8px 0 2px; padding: 0 8px 0 2px;
} }
} }
&-custom-text, &-custom-text:hover{
border-color: transparent;
}
} }
.@{page-prefix-cls} { .@{page-prefix-cls} {