Componente de barra de pasos de VUE

Prefacio

Recientemente trabajé en un proyecto sobre programadores que ganan dinero extra con un amigo. Encontré una interfaz de usuario y creé una interfaz. Esta chica artística tiene una voz agradable y es del tipo de hermana real. ¡Me encanta! Esta chica de arte probablemente no sabía que estaba trabajando en el back-end, y el front-end no era muy profesional. No preguntó si podía lograr este efecto y terminó la interfaz. Esto es un poco difícil para ¡yo! Hay una barra de pasos cuando escribí sobre la interfaz para publicar una pregunta. Traté de escribirla. Básicamente significa esto, pero no creo que sea perfecta. Entonces quiero ser perezoso para ver si hay alguna lista. componentes hechos. He escrito algunas entradas de blog, o el estilo no coincide o se realiza con imágenes. Las limitaciones son demasiado grandes, así que trabajaré duro y escribiré este complemento de VUE. ¡Mire la imagen de abajo!

Acerca de la barra de pasos simples

Características

1. Soporte para configurar el color de fondo de toda la barra de pasos
2. Soporte para configurar el color en progreso
3. Soporte para modificar el color de la fuente en progreso / no en progreso
4. Soporte para modificar el ancho y alto de la barra de paso.
5. Apoyar el componente principal para modificar los pasos actuales
6. Soporte para modificar el color del borde.
7. Soporta elementos de pasos de expansión dinámica
8. Compatible con unidad px / rem

parámetro

1. totalWidth: el ancho total de la barra de paso (tipo de número)
2. totalHeight: la altura total de la barra de paso (tipo de número)
3. itemWidth: ancho del elemento del paso (tipo de número)
4. unidad: unidad, px de soporte, rem (tipo de cadena)
5. stepList: contenido del paso (tipo de matriz)
6. currentStep: paso actual (tipo de número)
7. lienWidth: ancho de línea (tipo de número)
8. lienColor: color de línea (tipo de cadena)
9. stepBackground: color de fondo de la barra de pasos (tipo String)
10. stepBorderColor: color del borde de la barra de pasos (tipo de cadena)
11. ProcessingFontColor: color de fuente en curso (tipo de cadena)
12. ProcessingFontColorN: Sin color de fuente (tipo de cadena)
13. ProcessingBackground: color de fondo en curso (tipo String)

Precauciones

1. Este complemento requiere un entorno sass y la sintaxis scss se utiliza en el complemento
2. En ese momento, usar px como unidad es adecuado para un ancho de retención de 1 _{2, cuando la unidad es remota, un ancho de retención de 0.1} 0.2 es adecuado

Uso de complementos

1. Instale el complemento de barra de pasos simple

npm i simple-step-bar

Complemento de barra de pasos simple de montaje de archivo de inicio de Main.js

import simpleStepBar from 'simple-step-bar'

Vue.use(simpleStepBar);

3.Usar en vue

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

4. Empezar

Escribir al final

Este complemento está alojado en la plataforma gitee simple-step-bar y cargado en el repositorio npm simple-step-bar

simple-step-bar-demo: para demostración
simple-step-bar: código fuente del complemento

Bienvenidos a todos a tocar la estrella