VUE step bar component

Preface

I recently worked on a project about programmers earning extra money with a friend. I found a UI and created an interface. This art girl has a nice voice and is of the royal sister type. I love it! This art girl probably didn't know that I was working on the back-end, and the front-end was not very professional. She didn't ask if I could achieve this effect and finished the interface. This is a bit difficult for me! There is a step bar when I wrote about the issue of the interface. I tried to write it. It basically means this, but I don’t think it’s perfect. Then I want to be lazy to see if there are any ready-made components. I have written some blog posts, either the style does not match, or it is realized with pictures. The limitations are too great, then I will work hard and write this VUE plug-in! Please look at the picture below!

About simple-step-bar

Features

1. Support setting the background color of the entire step bar
2. Support setting the color in progress
3. Support to modify the font color in progress/not in progress
4. Support to modify the width and height of the step bar
5. Support the parent component to modify the current steps
6. Support to modify the border color
7. Support dynamic expansion step items
8. Support px/rem unit

parameter

1. totalWidth: the total width of the step bar (Number type)
2. totalHeight: the total height of the step bar (Number type)
3. itemWidth: step item width (Number type)
4. unit: unit, support px, rem (String type)
5. stepList: step content (Array type)
6. currentStep: current step (Number type)
7. lienWidth: line width (Number type)
8. lienColor: line color (String type)
9. stepBackground: step bar background color (String type)
10. stepBorderColor: Step bar border color (String type)
11. processingFontColor: font color in progress (String type)
12. processingFontColorN: No font color (String type)
13. processingBackground: background color in progress (String type)

Precautions

1. This plug-in requires a sass environment, and scss syntax is used in the plug-in
2. At that time, using px as the unit is lienWidth of 1 _{2 suitable, when the unit is rem, lienWidth of 0.1} 0.2 is suitable

Plug-in use

1. Install the simple-step-bar plugin

npm i simple-step-bar

2.Main.js startup file mount simple-step-bar plug-in

import simpleStepBar from 'simple-step-bar'

Vue.use(simpleStepBar);

3.Use in vue

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

4. Start

Write at the end

This plug-in is hosted on the gitee platform simple-step-bar and uploaded to the npm repository simple-step-bar

simple-step-bar-demo: for demo
simple-step-bar: plug-in source code

Welcome everyone to tap the star