前言
最近和朋友一起做一个关于程序员赚外快的项目,找了个UI出了个界面,这个美术妹子声音贼好听,御姐类型的,爱了爱了!这个美术妹子估计不知道我是做后端的,前端不是特别专业,她也不问我能不能做出这种效果就把界面搞完了,这就有点难为我了!写到发布问题这个界面的时候有一个步骤条这个功能,我试着写了一下,大致上是这么个意思,但是我觉得不是特别完美,然后我就想偷懒看看有没有现成的组件,找了一些博文,要么是样式不符合,要么就是用图片实现的,局限性太大了,那么我就劳苦一下吧,写了这个VUE插件!请看下图!
关于simple-step-bar
功能
- 支持设置整个步骤条背景色
- 支持设置进行中的颜色
- 支持修改进行中/未进行中的字体颜色
- 支持修改步骤条宽高
- 支持父组件修改当前进行的步骤
- 支持修改边框颜色
- 支持动态扩容步骤项
- 支持px/rem单位
参数
- totalWidth:步骤条总宽度(Number类型)
- totalHeight:步骤条总高度(Number类型)
- itemWidth:步骤项宽度(Number类型)
- unit:单位,支持px、rem(String类型)
- stepList:步骤内容(Array类型)
- currentStep:当前步骤(Number类型)
- lienWidth:线条宽度(Number类型)
- lienColor:线条颜色(String类型)
- stepBackground:步骤条背景色(String类型)
- stepBorderColor:步骤条边框颜色(String类型)
- processingFontColor:进行中字体颜色(String类型)
- processingFontColorN:未进行字体颜色(String类型)
- processingBackground:进行中背景颜色(String类型)
注意事项
- 本插件需要sass环境,在插件中使用了scss语法
- 当时用px为单位是lienWidth为12合适,当单位为rem时lienWidth为0.10.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