mirror of https://github.com/ElemeFE/element
Pagination: add disabled prop (#10006)
Hi-Linlin
杨奕
parent
810cae1c64
commit
e92d1d13aa
|
|
@ -221,6 +221,7 @@ Add more modules based on your scenario.
|
|||
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
|
||||
| prev-text | text for the prev button | string | — | — |
|
||||
| next-text | text for the next button | string | — | — |
|
||||
| disabled | whether Pagination is disabled | boolean | — | false |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|
|
|
|||
|
|
@ -207,6 +207,7 @@ Agrega más modulos basados en su escenario.
|
|||
| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string | — | — |
|
||||
| prev-text | texto para el botón `prev` | string | — | — |
|
||||
| next-text | texto para el botón `next` | string | — | — |
|
||||
| disabled | whether Pagination is disabled | boolean | — | false |
|
||||
|
||||
### Eventos
|
||||
| Nombre del evento | Descripción | Parámetros |
|
||||
|
|
|
|||
|
|
@ -221,6 +221,7 @@
|
|||
| popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
|
||||
| prev-text | 替代图标显示的上一页文字 | string | — | — |
|
||||
| next-text | 替代图标显示的下一页文字 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<template>
|
||||
<ul @click="onPagerClick" class="el-pager">
|
||||
<li
|
||||
:class="{ active: currentPage === 1 }"
|
||||
:class="{ active: currentPage === 1, disabled }"
|
||||
v-if="pageCount > 0"
|
||||
class="number">1</li>
|
||||
<li
|
||||
class="el-icon more btn-quickprev"
|
||||
:class="[quickprevIconClass]"
|
||||
:class="[quickprevIconClass, { disabled }]"
|
||||
v-if="showPrevMore"
|
||||
@mouseenter="quickprevIconClass = 'el-icon-d-arrow-left'"
|
||||
@mouseenter="onMouseenter('left')"
|
||||
@mouseleave="quickprevIconClass = 'el-icon-more'">
|
||||
</li>
|
||||
<li
|
||||
v-for="pager in pagers"
|
||||
:key="pager"
|
||||
:class="{ active: currentPage === pager }"
|
||||
:class="{ active: currentPage === pager, disabled }"
|
||||
class="number">{{ pager }}</li>
|
||||
<li
|
||||
class="el-icon more btn-quicknext"
|
||||
:class="[quicknextIconClass]"
|
||||
:class="[quicknextIconClass, { disabled }]"
|
||||
v-if="showNextMore"
|
||||
@mouseenter="quicknextIconClass = 'el-icon-d-arrow-right'"
|
||||
@mouseenter="onMouseenter('right')"
|
||||
@mouseleave="quicknextIconClass = 'el-icon-more'">
|
||||
</li>
|
||||
<li
|
||||
:class="{ active: currentPage === pageCount }"
|
||||
:class="{ active: currentPage === pageCount, disabled }"
|
||||
class="number"
|
||||
v-if="pageCount > 1">{{ pageCount }}</li>
|
||||
</ul>
|
||||
|
|
@ -37,7 +37,9 @@
|
|||
props: {
|
||||
currentPage: Number,
|
||||
|
||||
pageCount: Number
|
||||
pageCount: Number,
|
||||
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -53,7 +55,7 @@
|
|||
methods: {
|
||||
onPagerClick(event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'UL') {
|
||||
if (target.tagName === 'UL' || this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -83,6 +85,15 @@
|
|||
if (newPage !== currentPage) {
|
||||
this.$emit('change', newPage);
|
||||
}
|
||||
},
|
||||
|
||||
onMouseenter(direction) {
|
||||
if (this.disabled) return;
|
||||
if (direction === 'left') {
|
||||
this.quickprevIconClass = 'el-icon-d-arrow-left';
|
||||
} else {
|
||||
this.quicknextIconClass = 'el-icon-d-arrow-right';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,9 @@ export default {
|
|||
|
||||
nextText: String,
|
||||
|
||||
background: Boolean
|
||||
background: Boolean,
|
||||
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -62,7 +64,7 @@ export default {
|
|||
const TEMPLATE_MAP = {
|
||||
prev: <prev></prev>,
|
||||
jumper: <jumper></jumper>,
|
||||
pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange }></pager>,
|
||||
pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.internalPageCount } on-change={ this.handleCurrentChange } disabled={ this.disabled }></pager>,
|
||||
next: <next></next>,
|
||||
sizes: <sizes pageSizes={ this.pageSizes }></sizes>,
|
||||
slot: <my-slot></my-slot>,
|
||||
|
|
@ -107,7 +109,7 @@ export default {
|
|||
return (
|
||||
<button
|
||||
type="button"
|
||||
class={['btn-prev', { disabled: this.$parent.internalCurrentPage <= 1 }]}
|
||||
class={['btn-prev', { disabled: this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }]}
|
||||
on-click={ this.$parent.prev }>
|
||||
{
|
||||
this.$parent.prevText
|
||||
|
|
@ -126,7 +128,7 @@ export default {
|
|||
type="button"
|
||||
class={[
|
||||
'btn-next',
|
||||
{ disabled: this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
|
||||
{ disabled: this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
|
||||
]}
|
||||
on-click={ this.$parent.next }>
|
||||
{
|
||||
|
|
@ -166,7 +168,8 @@ export default {
|
|||
<el-select
|
||||
value={ this.$parent.internalPageSize }
|
||||
popperClass={ this.$parent.popperClass || '' }
|
||||
on-input={ this.handleChange }>
|
||||
on-input={ this.handleChange }
|
||||
disabled={ this.$parent.disabled }>
|
||||
{
|
||||
this.pageSizes.map(item =>
|
||||
<el-option
|
||||
|
|
@ -253,6 +256,7 @@ export default {
|
|||
domPropsValue={ this.$parent.internalCurrentPage }
|
||||
type="number"
|
||||
ref="input"
|
||||
disabled={ this.$parent.disabled }
|
||||
nativeOnKeyup={ this.handleKeyup }
|
||||
onChange={ this.handleChange }
|
||||
onFocus={ this.handleFocus }
|
||||
|
|
@ -284,11 +288,13 @@ export default {
|
|||
},
|
||||
|
||||
prev() {
|
||||
if (this.disabled) return;
|
||||
const newVal = this.internalCurrentPage - 1;
|
||||
this.internalCurrentPage = this.getValidCurrentPage(newVal);
|
||||
},
|
||||
|
||||
next() {
|
||||
if (this.disabled) return;
|
||||
const newVal = this.internalCurrentPage + 1;
|
||||
this.internalCurrentPage = this.getValidCurrentPage(newVal);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -87,6 +87,11 @@
|
|||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.el-pager li.disabled {
|
||||
color: $--color-text-placeholder;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@include m(small) {
|
||||
.btn-prev,
|
||||
.btn-next,
|
||||
|
|
@ -173,6 +178,10 @@
|
|||
color: $--color-text-regular;
|
||||
min-width: 30px;
|
||||
border-radius: 2px;
|
||||
|
||||
&.disabled {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-prev, .btn-next {
|
||||
|
|
@ -183,7 +192,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
.el-pager li:not(.disabled) {
|
||||
&:hover {
|
||||
color: $--pagination-hover-fill;
|
||||
}
|
||||
|
|
@ -236,6 +245,10 @@
|
|||
&.btn-quickprev {
|
||||
line-height: 28px;
|
||||
color: $--pagination-button-color;
|
||||
|
||||
&.disabled {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-quickprev:hover {
|
||||
|
|
|
|||
|
|
@ -2434,6 +2434,10 @@ eslint-config-defaults@*:
|
|||
version "9.0.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-defaults/-/eslint-config-defaults-9.0.0.tgz#a090adc13b2935e3f43b3cd048a92701654e5ad5"
|
||||
|
||||
eslint-config-elemefe@*:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-elemefe/-/eslint-config-elemefe-0.3.0.tgz#6f06cd6a8c6949bf58fa7fe2d4b4a4fde89bf008"
|
||||
|
||||
eslint-config-elemefe@0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/eslint-config-elemefe/-/eslint-config-elemefe-0.1.1.tgz#5a1664ce3f7d91f68528b508d040044ae6c10aa3"
|
||||
|
|
|
|||
Loading…
Reference in New Issue