|
Primeiramente, a última onda de renderizações: ![]()
Elementos básicosPrimeiramente, os elementos comumente pertencentes ao componente pager (doravante chamado de "componente pager") são: As configurações necessárias para a inicialização são: totalPage initPage mostrar-Prévio (se mostrar a página anterior) showNext (se deve mostrar a próxima página) mostrarItens (algumas páginas no meio) showJump (se mostrar o salto para qual página ele vai)
Esses podem ser recebidos por meio dos adereços da vue. Além disso, o próprio componente pager precisa ter uma Página atual que registre a página atual, o array de páginas é usado para acomodar o número de página exibido no meio, e o jumpPage vincula a entrada do número de página de salto. Realização básicaO código correspondente é:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" > a página anterior</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<forte v-show="páginas[0] > 2">...</strong>
<a v-for="página em páginas" :class="{ativo: currentPage == página ? verdadeiro : falso}" @click="go(página)">{{página}}</a>
<forte v-show="páginas[páginas.comprimento-1] < totalPágina - 1">...</strong>
<a v-if="totalPage > 1" :class="{ativo: currentPage == totalPage? true : false}" @click="go(totalPage)">{{totalPage}}</a>
<a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)" > próxima página</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total <em class="jump-total">{{totalPage}}</em> página, pular para</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>
Export default {
Adereços: {
totalPágina: { // Número total de páginas
tipo: Número,
padrão: 1,
Exigido: Verdadeiro
},
mostrarItens: { // Número de páginas exibidas, por exemplo: 1 ... 34[5]67 ... 10
tipo: Número,
padrão: 5
},
showPrev: { // se mostrar "Anterior"
tipo: Booleano,
padrão: verdadeiro
},
mostrarPróximo: { // Se mostrar "Próximo"
tipo: Booleano,
padrão: verdadeiro
},
mostrarSaltar: { // se mostrar "Pular"
tipo: Booleano,
padrão: verdadeiro
},
initPage: {
tipo: Número,
padrão: 1
}
},
data () {
return {
Página atual: 0,
páginas: [],
SaltoPágina: 0,
}
},
created() {// atribuição currentPage na inicialização
this.currentPage = this.initPage
}
métodos: {
ir (página) {
se(página < 1) {
página = 1
}
if(page > this.totalPage) {
página = este.totalPágina
}
se(página === isto.PáginaAtual) {
retorno
}
this.currentPage = parseInt(página,10)
isto.$emit('vai-página',{
página: this.currentPage
})
}
},
assista: {
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
O próximo passo é como obter o valor do array das páginas. Como as páginas estão sempre fortemente relacionadas à página atual e aos showItems que precisam ser exibidos na configuração, é totalmente possível mudar páginas para uma propriedade calculada:
computed: {
páginas () {
O array de números de página é obtido com base nos números de página inicial e final
let getPages = (start,end) => {
if(start <= 1 || start > end || start >= this.totalPage) {
start = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
fim = isto.totalPágina - 1
}
Seja arr = []
para (seja i = começar; i <= fim; i++) {
arr.push(i)
}
retorno arr
}
lets counts = this.showItems
if(this.totalPage < conta + 2) {
return getPages(2,this.totalPage)
} else {
if(this.currentPage <= Math.ceil(counts/2)) {
return getPages(2,counts)
} else se(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
return getPages (this.totalPage + 1 - counts,this.totalPage - 1)
} else {
seja metade = Math.ceil(contagens/2) - 1
deixe fim = isto.currentPage + metade
se(conta % 2 === 0) {
End++
}
return getPages(this.currentPage - metade,fim)
}
}
}
}
Expansão funcionalNeste ponto, um componente comum de virar páginas é basicamente implementado (o estilo pode ser personalizado por si só). No entanto, muitas vezes (especialmente em alguns antecedentes de gestão), combinados com o vue-router para criar um SPA, geralmente existem requisitos assim: Depois de virar para uma página em uma determinada lista, clique em um item para ir à página de edição e, após editar, você deve poder voltar à página antes de pular.
Esse requisito não é muito conveniente de implementar se você usar apenas o componente pager acima. Algumas pessoas podem dizer que é aceitável combinar vuex, mas nesse caso é necessário registrar o número da página antes do salto no estado. Se existem muitas listas de folhete, obviamente não é elegante registrar várias páginas. No entanto, devido à elegância da implementação do Vue-Router, é fácil atender aos requisitos acima:
Primeiro, adicione a configuração de modo nos props, porque quando o modo é params, o jump precisa saber em qual rota está, então:
mode: {
tipo: Corda,
padrão: 'evento' // 'evento' | 'consulta' | 'params'
},
routeName: {
tipo: String
}
Depois, faça algumas alterações no método real de lógica de salto go(página):
ir (página) {
se(página < 1) {
página = 1
}
if(page > this.totalPage) {
página = este.totalPágina
}
se(página === isto.PáginaAtual) {
retorno
}
this.currentPage = parseInt(página,10)
if(this.mode == 'consulta') {
deixe a consulta = this.$route.query
query.page = this.currentPage
this.$router.go({query: query})
} else if(this.mode == 'params') {
Seja os parâmetros = this.$route.params
params.page = this.currentPage
isto.$router.go({nome: este.nomeCaminhoAALinha,parámetros: parámetros})
} else {
isto.$emit('vai-página',{
página: this.currentPage
})
}
}
Isso basicamente completa um componente simples e universal de virar páginas, que não pode ser enviado ao repositório para que todos possam usar.
O componente de virar páginas finalmente implementado neste artigo foi lançado, e você pode ver uma onda de código-fonte:
vue-simple-pager
| 
Publicado em 25/07/2019 16:12:31
|
|
|
