Page add disabled prop
This commit is contained in:
梁灏
parent
53f950ab96
commit
4e32dc403f
4 changed files with 59 additions and 6 deletions
|
|
@ -7,10 +7,11 @@
|
|||
<Page :current="2" :total="50" simple></Page>
|
||||
|
||||
<div style="margin:10px 0px">
|
||||
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
|
||||
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
|
||||
</div>
|
||||
<div style="margin:10px 0px">
|
||||
<Page :total="1000" show-sizer show-elevator show-total :current="12"></Page>
|
||||
<Page disabled :total="1000" show-sizer show-elevator show-total :current="12"></Page>
|
||||
<Page :current="2" :total="50" simple disabled />
|
||||
</div>
|
||||
<div style="margin:100px 0px">
|
||||
<Page :total="500" show-sizer show-elevator show-total ></Page>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="showSizer || showElevator" :class="optsClasses">
|
||||
<div v-if="showSizer" :class="sizerClasses">
|
||||
<i-select v-model="currentPageSize" :size="size" :placement="placement" :transfer="transfer" @on-change="changeSize">
|
||||
<i-select v-model="currentPageSize" :size="size" :placement="placement" :transfer="transfer" :disabled="disabled" @on-change="changeSize">
|
||||
<i-option v-for="item in pageSizeOpts" :key="item" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
|
||||
</i-select>
|
||||
</div>
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
:value="_current"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
:disabled="disabled"
|
||||
@keyup.enter="changePage"
|
||||
>
|
||||
{{ t('i.page.p') }}
|
||||
|
|
@ -43,7 +44,8 @@
|
|||
allPages: Number,
|
||||
isSmall: Boolean,
|
||||
placement: String,
|
||||
transfer: Boolean
|
||||
transfer: Boolean,
|
||||
disabled: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
:value="currentPage"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
:disabled="disabled"
|
||||
@keydown="keyDown"
|
||||
@keyup="keyUp"
|
||||
@change="keyUp">
|
||||
|
|
@ -61,6 +62,7 @@
|
|||
:show-elevator="showElevator"
|
||||
:_current.once="currentPage"
|
||||
:current="currentPage"
|
||||
:disabled="disabled"
|
||||
:all-pages="allPages"
|
||||
:is-small="isSmall"
|
||||
@on-size="onSize"
|
||||
|
|
@ -144,6 +146,10 @@
|
|||
nextText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -192,6 +198,7 @@
|
|||
`${prefixCls}`,
|
||||
{
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${prefixCls}-with-disabled`]: this.disabled,
|
||||
'mini': !!this.size
|
||||
}
|
||||
];
|
||||
|
|
@ -200,7 +207,7 @@
|
|||
return [
|
||||
`${prefixCls}-prev`,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: this.currentPage === 1,
|
||||
[`${prefixCls}-disabled`]: this.currentPage === 1 || this.disabled,
|
||||
[`${prefixCls}-custom-text`]: this.prevText !== ''
|
||||
}
|
||||
];
|
||||
|
|
@ -209,7 +216,7 @@
|
|||
return [
|
||||
`${prefixCls}-next`,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: this.currentPage === this.allPages,
|
||||
[`${prefixCls}-disabled`]: this.currentPage === this.allPages || this.disabled,
|
||||
[`${prefixCls}-custom-text`]: this.nextText !== ''
|
||||
}
|
||||
];
|
||||
|
|
@ -233,6 +240,7 @@
|
|||
},
|
||||
methods: {
|
||||
changePage (page) {
|
||||
if (this.disabled) return;
|
||||
if (this.currentPage != page) {
|
||||
this.currentPage = page;
|
||||
this.$emit('update:current', page);
|
||||
|
|
@ -240,6 +248,7 @@
|
|||
}
|
||||
},
|
||||
prev () {
|
||||
if (this.disabled) return;
|
||||
const current = this.currentPage;
|
||||
if (current <= 1) {
|
||||
return false;
|
||||
|
|
@ -247,6 +256,7 @@
|
|||
this.changePage(current - 1);
|
||||
},
|
||||
next () {
|
||||
if (this.disabled) return;
|
||||
const current = this.currentPage;
|
||||
if (current >= this.allPages) {
|
||||
return false;
|
||||
|
|
@ -254,6 +264,7 @@
|
|||
this.changePage(current + 1);
|
||||
},
|
||||
fastPrev () {
|
||||
if (this.disabled) return;
|
||||
const page = this.currentPage - 5;
|
||||
if (page > 0) {
|
||||
this.changePage(page);
|
||||
|
|
@ -262,6 +273,7 @@
|
|||
}
|
||||
},
|
||||
fastNext () {
|
||||
if (this.disabled) return;
|
||||
const page = this.currentPage + 5;
|
||||
if (page > this.allPages) {
|
||||
this.changePage(this.allPages);
|
||||
|
|
@ -270,11 +282,13 @@
|
|||
}
|
||||
},
|
||||
onSize (pageSize) {
|
||||
if (this.disabled) return;
|
||||
this.currentPageSize = pageSize;
|
||||
this.$emit('on-page-size-change', pageSize);
|
||||
this.changePage(1);
|
||||
},
|
||||
onPage (page) {
|
||||
if (this.disabled) return;
|
||||
this.changePage(page);
|
||||
},
|
||||
keyDown (e) {
|
||||
|
|
|
|||
|
|
@ -54,6 +54,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-with-disabled &-item, &-with-disabled &-disabled{
|
||||
cursor: @cursor-disabled;
|
||||
background-color: @input-disabled-bg;
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
a {
|
||||
color: #ccc;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
&-active {
|
||||
background-color: @border-color-base;
|
||||
border-color: @border-color-base;
|
||||
|
||||
a, &:hover a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item-jump-prev, &-item-jump-next {
|
||||
&:after {
|
||||
content: "•••";
|
||||
|
|
@ -77,6 +100,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-with-disabled &-item-jump-prev, &-with-disabled &-item-jump-next{
|
||||
cursor: @cursor-disabled;
|
||||
&:hover {
|
||||
&:after{
|
||||
display: block;
|
||||
}
|
||||
i{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item-jump-prev:hover {
|
||||
i:after {
|
||||
content: "\F115";
|
||||
|
|
@ -208,6 +243,7 @@
|
|||
vertical-align: middle;
|
||||
|
||||
input {
|
||||
.input;
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
margin: 0 8px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue