Page add prev-text and next-text prop
This commit is contained in:
parent
1a4a76e903
commit
ac50d539aa
3 changed files with 20 additions and 5 deletions
|
@ -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>
|
||||||
|
|
|
@ -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 !== ''
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
|
@ -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} {
|
||||||
|
|
Loading…
Add table
Reference in a new issue