Componente da barra de etapas VUE

Prefácio

Recentemente, trabalhei em um projeto sobre programadores que ganham dinheiro extra com um amigo. Encontrei uma IU e criei uma interface. Essa garota da arte tem uma voz bonita e é do tipo irmã real. Eu adoro isso! Essa garota da arte provavelmente não sabia que eu estava trabalhando no back-end e o front-end não era muito profissional. Ela não perguntou se eu conseguiria esse efeito e terminei a interface. Isso é um pouco difícil para mim! Há uma barra de etapas quando escrevi sobre a interface de publicação de uma pergunta. Tentei escrevê-la. Basicamente, significa isso, mas não acho que seja perfeito. Então, quero ser preguiçoso para ver se há algum componentes feitos. Eu escrevi alguns posts de blog, ou o estilo não combina ou é realizado com imagens. As limitações são muito grandes, então vou trabalhar duro e escrever este plug-in VUE! Por favor, olhe a foto abaixo!

Sobre a barra de etapas simples

Recursos

1. Suporte para definir a cor de fundo de toda a barra de etapas
2. Suporte para definir a cor em andamento
3. Suporte para modificar a cor da fonte em andamento / não em andamento
4. Suporte para modificar a largura e altura da barra de degrau
5. Apoie o componente pai para modificar as etapas atuais
6. Suporte para modificar a cor da borda
7. Suporta itens de etapa de expansão dinâmica
8. Unidade px / rem de suporte

parâmetro

1. totalWidth: a largura total da barra de degraus (tipo de número)
2. totalHeight: a altura total da barra de degrau (tipo de número)
3. itemWidth: largura do item de etapa (tipo de número)
4. unidade: unidade, suporte px, rem (tipo String)
5. stepList: conteúdo da etapa (tipo de matriz)
6. currentStep: etapa atual (tipo de número)
7. lienWidth: largura da linha (tipo de número)
8. lienColor: cor da linha (tipo String)
9. stepBackground: cor de fundo da barra de etapas (tipo String)
10. stepBorderColor: cor da borda da barra de etapas (tipo String)
11. processingFontColor: cor da fonte em andamento (tipo String)
12. processingFontColorN: sem cor da fonte (tipo String)
13. processingBackground: cor de fundo em andamento (tipo String)

Precauções

1. Este plug-in requer um ambiente sass e a sintaxe scss é usada no plug-in
2. Naquela época, usando px como a unidade é lienWidth de 1 _{2 adequado, quando a unidade é rem, lienWidth de 0,1} 0,2 é adequado

Uso de plug-in

1. Instale o plugin de barra de etapas simples

npm i simple-step-bar

2. Plug-in de barra simples de montagem de arquivo de inicialização do Main.js

import simpleStepBar from 'simple-step-bar'

Vue.use(simpleStepBar);

3. Use in vue

<simple-step-bar></simple-step-bar>

4. Comece

Escreva no final

Este plug-in é hospedado na plataforma gitee simple-step-bar e carregado para o repositório npm simple-step-bar

-simples-step-bar-demo: for demo
simple-step-bar: código-fonte do plug-in

Bem-vindos a todos para tocar na estrela