小鹅通组件

# Steps 步骤条

引导用户按照流程完成任务的分步导航条

# 初始化

单独引入时：在入口js文件处引入

import { Steps, SimpleStep } from '@xiaoe/sense' // 简单的步骤条
import '@xiaoe/sense/static/index.css'
Vue.use(Steps)
Vue.use(SimpleStep);
1
2
3
4

# 效果

# 水平


# 垂直


# 简易步骤条


简单的步骤条

# 使用示例

// 水平步骤条
<ss-steps :current="current.horizontal" :status="status.horizontal">
  <ss-step 
    title="Horizontal-1" 
    desc="水平描述"
  >
  </ss-step>
  <ss-step 
    title="Horizontal-2" 
    desc="水平描述"
  >
  </ss-step>
  <ss-step 
    title="Horizontal-3" 
    desc="水平描述"
  >
  </ss-step>
</ss-steps>
// 垂直步骤条
<ss-steps direction="vertical" :current="current.vertical" :status="status.vertical">
  <ss-step 
    title="Vertical-1"
    desc="垂直描述"
  ></ss-step>
  <ss-step 
    title="Vertical-2"
    desc="垂直描述"
  ></ss-step>
  <ss-step 
    title="Vertical-3"
    desc="垂直描述"
  ></ss-step>
</ss-steps>
// 简易步骤条
<div class="item">
  <div>简单的步骤条</div>
  <div class="item-sense">
    <ss-steps :current="current.simple" direction="horizontal" :status="status.simple">
      <ss-simple-step title="第一步内容："></ss-simple-step>
      <ss-simple-step title="第二步内容："></ss-simple-step>
      <ss-simple-step title="第三步内容："></ss-simple-step>
    </ss-steps>
  </div>
  <div class="ctrlBtnArea">
    <button @click="prev('simple')">后退</button>
    <button @click="next('simple')">前进</button>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 参数

参数 说明 类型 默认值 可选值
direction 步骤条方向 String horizontal horizontal,vertical
current 当前步骤，从0开始计数 Number - -
status 当前步骤的状态 String process process, wait, finish, error

# step-simple

注意：step-simple 是基于step组件的继承实现，目前没对Steps垂直方向上做处理，且支持性上没有step的desc属性，只支持传入对应title

参数 说明 ｜ 类型 默认值 可选值 ｜
title 步骤条信息 String ''

# 事件

参数 说明 类型 默认值 可选值
title 标题 String - -
desc 详情描述 String - -

← Select 选择器 →