@58fe/p5/src/doc/step.md

pc端vue组件

<script>
	module.exports = {
		methods: {
			nextStep(con) {
				if (this.active === 4) {
					this.active = 0;
					return false;
				}
				this.active += 1;
            }
        },
		data() {
			return {
                active: 0
            };
		}
	}
</script>

## Step 步骤

### 引入
```javascript
import {step, stepItem} from '@58fe/p5';
```

### 基本用法
设置`active`为当前操作步骤
:::demo 
```html
<step :active="active">
	<step-item title="步骤1"></step-item>
	<step-item title="步骤2"></step-item>
	<step-item title="步骤3"></step-item>
	<step-item title="步骤4"></step-item>
</step>
<btn @click="nextStep()">下一步</btn>
<script>
	module.exports = {
		methods: {
			nextStep(con) {
				if (this.active === 4) {
					this.active = 0;
					return false;
				}
				this.active += 1;
            }
        },
		data() {
			return {
                active: 3
            };
		}
	}
</script>
```

:::

### 带有描述的步骤
设置`title`为步骤名称，`desc`为步骤描述
:::demo 
```html
<step :active="2">
	<step-item title="步骤1" desc="我是步骤1的描述"></step-item>
	<step-item title="步骤2" desc="我是步骤2的描述"></step-item>
	<step-item title="步骤3" desc="我是步骤3的描述"></step-item>
	<step-item title="步骤4" desc="我是步骤3的描述"></step-item>
</step>
```

:::


### 设置居中
`center`来设置样式居中。
:::demo 
```html
<step :active="3" :center="true">
	<step-item title="步骤1" desc="我是步骤1的描述"></step-item>
	<step-item title="步骤2" desc="我是步骤2的描述"></step-item>
	<step-item title="步骤3" desc="我是步骤3的描述"></step-item>
	<step-item title="步骤4" desc="我是步骤3的描述"></step-item>
</step>
```

:::

### 参数

#### Step

| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| active         | 当前步骤       | Number|String | ——           | 0     |
| center | 样式居中       | Boolean              | ——           | false |

<br/>

#### StepItem
| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| title         | 步骤名称       | String | ——           |  ——     |
| desc | 步骤描述       | String              | ——           |  ——  |