# simple-step-bar

**Repository Path**: hahatimer/simple-step-bar

## Basic Information

- **Project Name**: simple-step-bar
- **Description**: vue开源插件步骤条
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-11-21
- **Last Updated**: 2021-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210127210821891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE44Nzc0MjUyODc=,size_16,color_FFFFFF,t_70)

## 关于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插件**
```java
npm i simple-step-bar
```

**2.main.js启动文件挂载simple-step-bar插件**
```csharp
import simpleStepBar from 'simple-step-bar'

Vue.use(simpleStepBar);
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210127210621929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE44Nzc0MjUyODc=,size_16,color_FFFFFF,t_70)
**3.vue中使用**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210127210716836.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE44Nzc0MjUyODc=,size_16,color_FFFFFF,t_70)

```csharp
<simple-step-bar></simple-step-bar>
```

**4.启动**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210127210821891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTRE44Nzc0MjUyODc=,size_16,color_FFFFFF,t_70)