# ProcessLine/ProcessLineGroup

纵向步骤条

# 引入说明

请切记该组件不要分开使用。

TIP

import ProcessLine from "jimoui/components/ProcessLine/V1/ProcessLine";
import ProcessLineGroup from "jimoui/components/ProcessLineGroup/V1/ProcessLineGroup";
1
2

# 代码演示

TIP

//设计规范第一种
<ProcessLineGroup>
    <ProcessLine :process="process1" :pointType="'target'"></ProcessLine>
    <ProcessLine :process="process2" :pointType="'light'"></ProcessLine>
    <ProcessLine :process="process3" :pointType="'light'"></ProcessLine>
</ProcessLineGroup>

//设计规范第二种
<ProcessLineGroup>
    <ProcessLine :process="process1"></ProcessLine>
    <ProcessLine :process="process2"></ProcessLine>
    <ProcessLine :process="process3"></ProcessLine>
</ProcessLineGroup>
1
2
3
4
5
6
7
8
9
10
11
12
13

export default kayakVue({
  name: "ProcessLine",
  el: "demo-processLine",
  data() {
    return {
      process1: {
        title: "操作成功",
        content: "内容详情,根据实际文案展示",
        tips: "11-23 13:41",
      },
      process2: {
        title: "标题",
        content: "内容详情,根据实际文案展示,可展示多行,根据实际文案展示,可展示多行",
        tips: "11-23 13:41",
      },
      process3: {
        title: "标题标题标题标题标题标题标题可折行展示",
        content: "内容详情,根据实际文案展示",
        tips: "11-23 13:41",
      },
    };
  }
})

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

# 属性

ProcessLine:

配置 用途 取值 使用描述
:process 当前列表项的内容配置 ProcessConfig ProcessConfig:{
title:"标题文案",
content:"描述文案"
tips:"标题栏右侧提示语,通常为时间、日期等"
}
:pointType 点点配色类型。右侧文案会根据不同配置展示不同样式 String 默认为deep。支持target勾选点/deep深色点/light浅色点。
:processColor 改变步骤条颜色 String 默认为#ff680a
  • iOS
  • Android
  • Web
  • MP
v1.0.0