|
En primer lugar, la última oleada de renderizaciones: ![]()
Elementos básicosEn primer lugar, los elementos que comúnmente posee el componente buscapersonas (en adelante denominado "componente buscapersonas") son: Las configuraciones necesarias para la inicialización son: totalPágina initPage mostrarse Anterior (si mostrar la página anterior) showNext (si mostrar la siguiente página) mostrarElementos (unas páginas en el centro) showJump (si mostrar el salto a qué página va)
Estos pueden recibirse a través de los accesorios de vue. Además, el propio componente del buscapersonas debe tener una Página actual que registre la página actual, el array de páginas se utiliza para acomodar el número de página que se muestra en el centro, y el jumpPage encaja la entrada del número de página de salto. Realización básicaEl código correspondiente es:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > la página anterior</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<fuerte v-show="páginas[0] > 2">...</strong>
<a v-for="página en páginas" :class="{activo: currentPage == página ? verdadero : falso}" @click="go(página)">{{página}}</a>
<fuerte v-show="páginas[páginas.longitud-1] < totalPágina - 1">...</strong>
<a v-if="totalPage > 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{{totalPage}}</a>
<a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)" > siguiente página</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="salto-total">{{totalPágina}}</em> página, saltar a</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>Página</span>
<a @click="go(jumpPage)" > determinado</a>
</div>
</div>
</template>
<script>
exportar default {
Utilería: {
totalPágina: { // Número total de páginas
tipo: Número,
por defecto: 1,
Requerido: Verdadero
},
mostrarElementos: { // Número de páginas mostradas, por ejemplo: 1 ... 34[5]67 ... 10
tipo: Número,
Default: 5
},
mostrarPrev: { // si mostrar "Anterior"
tipo: booleano,
Por defecto: verdadero
},
mostrarSiguiente: { // Si mostrar "Siguiente"
tipo: booleano,
Por defecto: verdadero
},
mostrarSalto: { // si mostrar "Saltar"
tipo: booleano,
Por defecto: verdadero
},
initPage: {
tipo: Número,
Default: 1
}
},
data () {
return {
Página actual: 0,
páginas: [],
saltoPágina: 0,
}
},
created() {// asignación de la Página actual en la inicialización
this.currentPage = this.initPage
}
Métodos: {
go (página) {
if(página < 1) {
página = 1
}
if(page > this.totalPage) {
página = esto.totalPágina
}
if(page === this.currentPage) {
devolución
}
this.currentPage = parseInt(página,10)
esto.$emit('go-page',{
página: esto.actualPágina
})
}
},
Mira: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
El siguiente paso es cómo obtener el valor del array de páginas. Dado que las páginas siempre están fuertemente relacionadas con la página actual y los showItems que deben mostrarse en la configuración, es totalmente posible cambiar páginas a una propiedad calculada:
computed: {
páginas () {
El array de números de página se obtiene en función de los números de página de inicio y final
let getPages = (inicio,fin) => {
si(inicio <= 1 || inicio > fin || inicio >= esto.páginaTotal) {
Inicio = 2
}
if(fin >= this.totalPage || fin < inicio || fin <= 1) {
fin = esto.totalPágina - 1
}
Sea arr = []
para (sea i = inicio; i <= fin; i++) {
arr.push(i)
}
Retorno de la Arr
}
lets conteos = this.showItems
if(this.totalPage < cuenta + 2) {
return getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages (esto.totalPágina + 1 - cuentas,esto.totalPágina - 1)
} else {
sea la mitad = Math.ceil(cuentas/2) - 1
sea fin = esto.currentPage + mitad
si(cuenta % 2 === 0) {
end++
}
return getPages(this.currentPage - mitad,fin)
}
}
}
}
Expansión funcionalEn este punto, básicamente se implementa un componente ordinario de pasar páginas (el estilo puede personalizarse por sí solo). Sin embargo, muchas veces (especialmente en algunos perfiles de gestión), combinadas con vue-router para crear un SPA, suelen existir estos requisitos: Después de pasar a una página de una lista, haz clic en un elemento para ir a la página de edición, y después de editar, quieres poder volver a la página antes de saltar.
Este requisito no es muy cómodo de implementar si solo usas el componente de buscapersonas anterior. Algunas personas pueden decir que está bien combinar vuex, pero en este caso es necesario registrar el número de página antes del salto en el estado. Si hay muchas listas de páginas que se pasan, obviamente no es elegante registrar varias páginas. Sin embargo, debido a la elegancia de la implementación de Vue-Router, es fácil cumplir con los requisitos anteriores:
Primero, añade la configuración de modo en los props, porque cuando el modo es params, el salto necesita saber en qué ruta está, así que:
mode: {
tipo: Cuerda,
por defecto: 'evento' // 'evento' | 'consulta' | 'params'
},
routeName: {
tipo: String
}
Luego haz algunos cambios en el método de lógica de salto real go(página):
go (página) {
if(página < 1) {
página = 1
}
if(page > this.totalPage) {
página = esto.totalPágina
}
if(page === this.currentPage) {
devolución
}
this.currentPage = parseInt(página,10)
if(this.mode == 'consulta') {
Let Query = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
Sea parámetros = this.$route.params
params.page = this.currentPage
esto.$router.go({nombre: este.nombreruta,params: params})
} else {
esto.$emit('go-page',{
página: esto.actualPágina
})
}
}
Esto básicamente completa un componente simple y universal de pasar páginas, que no puede enviarse al repositorio para que todo el mundo lo use.
El componente de pasada de página finalmente implementado en este artículo ha sido lanzado, y puedes ver una oleada de código fuente:
vue-simple-pager
| 
Publicado en 25/7/2019 16:12:31
|
|
|
