VUE步骤条组件

前言

最近和朋友一起做一个关于程序员赚外快的项目，找了个UI出了个界面，这个美术妹子声音贼好听，御姐类型的，爱了爱了！这个美术妹子估计不知道我是做后端的，前端不是特别专业，她也不问我能不能做出这种效果就把界面搞完了，这就有点难为我了！写到发布问题这个界面的时候有一个步骤条这个功能，我试着写了一下，大致上是这么个意思，但是我觉得不是特别完美，然后我就想偷懒看看有没有现成的组件，找了一些博文，要么是样式不符合，要么就是用图片实现的，局限性太大了，那么我就劳苦一下吧，写了这个VUE插件！请看下图！

关于simple-step-bar

功能

1. 支持设置整个步骤条背景色
2. 支持设置进行中的颜色
3. 支持修改进行中/未进行中的字体颜色
4. 支持修改步骤条宽高
5. 支持父组件修改当前进行的步骤
6. 支持修改边框颜色
7. 支持动态扩容步骤项
8. 支持px/rem单位

参数

1. totalWidth：步骤条总宽度（Number类型）
2. totalHeight：步骤条总高度（Number类型）
3. itemWidth：步骤项宽度（Number类型）
4. unit：单位，支持px、rem（String类型）
5. stepList：步骤内容（Array类型）
6. currentStep：当前步骤（Number类型）
7. lienWidth：线条宽度（Number类型）
8. lienColor：线条颜色（String类型）
9. stepBackground：步骤条背景色（String类型）
10. stepBorderColor：步骤条边框颜色（String类型）
11. processingFontColor：进行中字体颜色（String类型）
12. processingFontColorN：未进行字体颜色（String类型）
13. processingBackground：进行中背景颜色（String类型）

注意事项

1. 本插件需要sass环境，在插件中使用了scss语法
2. 当时用px为单位是lienWidth为1_{2合适,当单位为rem时lienWidth为0.1}0.2合适

插件使用

1.安装simple-step-bar插件

npm i simple-step-bar

2.main.js启动文件挂载simple-step-bar插件

import simpleStepBar from 'simple-step-bar'

Vue.use(simpleStepBar);

3.vue中使用

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

4.启动

写在最后

此插件以托管到gitee平台simple-step-bar，及上传npm仓库simple-step-bar

simple-step-bar-demo：为演示demo
simple-step-bar：插件源码

欢迎各位点点star