Olá a todos, sou Pai Daxing. Recentemente, construí manualmente uma plataforma de gerenciamento de segundo plano e a chamei de " Radar-Solution " . Durante o processo de desenvolvimento, comparei outras soluções de segundo plano que foram formadas e descobri que todas elas existem. Layouthá um componente breadcrumb no cabeçalho do site, acho que é muito sério e não há efeito de animação ao alternar, então pensei em fazer um breadcrumb com animação para me divertir.
breadcrumbs dinâmicos
componente breadcrumb
O que é um componente breadcrumb:
É um auxílio à navegação na interface do usuário. É uma maneira de os usuários localizarem e moverem sua posição dentro de um programa ou arquivo.
Componentes de navegação breadcrumb comuns são divididos em duas categorias, a saber:
- migalhas de pão estáticas
- Breadcrumbs Dinâmicos
Vamos primeiro entender como esses dois componentes do breadcrumb são implementados, e também têm suas vantagens e desvantagens
migalhas de pão estáticas
Refere-se ao menu de navegação breadcrumb correspondente escrito em cada página
vantagem:
- A lógica é simples, depois de escrever um, os outros podem ser colados e copiados diretamente
deficiência:
- Cada página precisa ser escrita novamente
- A estrutura do caminho da página foi alterada e precisa ser modificada manualmente
- Difícil de manter e expandir
breadcrumbs dinâmicos
urlGera automaticamente um menu de breadcrumb com base no atual
vantagem:
- Breadcrumbs dinâmicos serão calculados corretamente, não importa o que aconteça com o caminho
deficiência:
- É um pouco mais complicado do que a lógica das migalhas de pão estáticas
Em seguida, usaremos breadcrumbs dinâmicos para concluir esse requisito. No início da codificação, vamos primeiro analisar os requisitos e dividir as etapas de implementação, para não garantir uma lógica clara durante o processo de implementação
- Criar um componente básico de breadcrumb
- Obter dados de roteamento
- Renderize breadcrumbs dinâmicos com base em dados
ps: O código que aparece abaixo é usado como
ElementUI
1. Crie um componente básico de breadcrumb
O efeito de renderização é o seguinte:
Em seguida, a primeira etapa da trilha de navegação estática foi concluída e, em seguida, precisamos avançar para este componente estático. Não é difícil descobrir no código acima que este componente contém principalmente duas partes de componentes:
el-breadcrumb: recipiente de natureza envolventeel-breadcrumb-item: Item de navegação separado
Se quisermos completar o efeito dinâmico, só precisamos percorrerel-breadcrumb-itemo loop com base nos dados dinâmicos, então só precisamos considerar os dados se os dados forem obtidos!
2. Obtenha dados de roteamento
Para obter dados de roteamento, precisamos apenas monitorar o roteamento para obter os dados. Aqui Vuefornecemos um método específico para obter os dados. Precisamos apenas obter vue.$route.matchedos dados que correspondam ao endereço de roteamento fornecido. Amigos que não conhecem muito bem , vou te enviar aqui diretamente , e aqui apenas apresento o método de implementação.
Ouça a mudança da rota, podemos obter o endereço da rota específica
Renderize breadcrumbs dinâmicos com base em dados
el-breadcrumb-itemAgora que os dados foram obtidos, não preciso dizer que todos devem saber o que fazer. É uma v-foroperação em que as migalhas de pão não estão prestando atenção. O
efeito de renderização é o seguinte:
4. Realize o efeito de animação
A barra de navegação básica do breadcrumb foi concluída, mas não há efeito de animação, então nossa tarefa ainda não está concluída, continue adicionando efeitos de animação aos breadcrumbs existentes, de fato, o Vue também nos forneceu um método para adicionar animação, Use transitionpara embrulhar a parte que precisamos adicionar animação. Não vou apresentar o conceito aqui. Se você ainda não entendeu, vou te mandar lá . Em seguida, é só usar transitionpara embrulhar nossas migalhas de pão!
Em seguida, adicione estilos de animação específicos a ele e pronto!
Acabou, vamos dar uma olhada no efeito de renderização final!
Finalmente, alcançamos o resultado ideal original.Para mim, este caso não apenas consolidou Vuealgumas das minhas operações de comando, mas também me permitiu ter mais processos de pensamento e pensamento.
Terminar
Aqui estão apenas alguns casos sobre breadcrumbs, todos os códigos podem ser obtidos no GitHub, o projeto ainda está em processo de desenvolvimento...
Endereço do GitHub: https://github.com/pdxjie/vue-admin-radar