6.9 流程步骤（Simple Flow）

多用于插件页日志图标中详细日志展示。

含标题、描述、时间的流程图

可只显示标题，也支持多个高亮

可配置字体大小、背景色

实例

基础用法

<template>
  <div class="dof-demo">
    <dof-minibar
      title="dof-simple-flow"
      background-color="#00A4F2"
      text-color="#ffffff"
      :left-button="leftButton"
    ></dof-minibar>

    <scroller class="scroller">
      <dof-catalog title="使用案例" background-color="#daf9ca"></dof-catalog>
      <text class="title">含标题、描述、时间的简易流程图</text>
      <dof-simple-flow :list="testData1"></dof-simple-flow>

      <text class="title">可只显示标题，也支持显示多个高亮</text>
      <dof-simple-flow :list="testData2"></dof-simple-flow>

      <text class="title">可配置主题色</text>
      <dof-simple-flow :list="testData1" :flow-config="flowConfig"></dof-simple-flow>

      <text class="title">横向单行显示，可配置字体大小、背景色</text>
      <div class="horizontalFlow">
        <dof-simple-flow :list="testData3" :flow-config="flowConfig1"></dof-simple-flow>
      </div>

      <text class="title">支持流程图动态更新</text>
      <dof-simple-flow :list="folding ? testData4 : testData4.slice(0, 4)"></dof-simple-flow>
      <div class="btnWrap">
        <dof-button
          :text="folding ? '模拟动态更新-减少' : '模拟动态更新-增加'"
          @dofButtonClicked="() => (folding = !folding)"
        ></dof-button>
      </div>
    </scroller>
  </div>
</template>

<script>
import { DofSimpleFlow, DofMinibar, DofButton, DofCatalog } from 'dolphin-intl-ui'

export default {
  components: { DofSimpleFlow, DofMinibar, DofButton, DofCatalog },
  data: () => ({
    leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
    folding: false,
    flowConfig: {
      lineColor: '#00BDB2',
      pointInnerColor: '#00BDB2',
      highlightTitleColor: '#00BDB2',
      highlightPointInnerColor: '#00BDB2',
      highlightPointOuterColor: 'rgba(0,189,178,0.2)',
    },
    flowConfig1: {
      lineColor: '#E5E5E8',
      pointInnerColor: '#C7C7CC',
      highlightTitleColor: '#8E969B',
      highlightPointInnerColor: '#C7C7CC',
      titleSize: '24px',
    },
    testData1: [
      { date: '2017-05-24 21:10:29', highlight: true, title: '洗涤方式已确认', desc: '' },
      { date: '2017-05-24 19:54:28', title: '洗涤时间已更新', desc: '' },
      { date: '2017-05-24 19:50:21', title: '洗涤方案已上传', desc: '您已经确定了具体的方案' },
      { date: '2017-05-24 19:49:03', title: '洗涤完毕', desc: '建议最后开启消毒模式两小时后使用更佳' },
    ],
    testData2: [
      { highlight: true, title: '方案已确认' },
      { highlight: true, title: '方案已更新' },
      { title: '方案已上传' },
      { title: '商家已接单' },
    ],
    testData3: [
      { title: '22:31:06 加热 6 分钟，用电 0.3 度' },
      { title: '21:31:06 加热 6 分钟，用电 0.3 度' },
      { title: '17:37:40 加热 9 分钟，用电 0.7 度' },
      { title: '13:31:06 加热 6 分钟，用电 0.3 度' },
    ],
    testData4: [
      { date: '2017-05-24 21:10:43', highlight: true, title: '预付款已支付', desc: '' },
      { date: '2017-05-24 21:10:41', title: '订单待付款', desc: '' },
      { date: '2017-05-24 21:10:29', title: '方案已确认', desc: '' },
      { date: '2017-05-24 19:54:28', title: '方案已更新', desc: '' },
      { date: '2017-05-24 19:50:21', title: '方案已上传', desc: '您已确定方案' },
    ],
  }),
}
</script>

Attributes

Prop	Type	Required	Default	Description
list	Array	Y	-	流程节点数据，见注 1
flow-config	Object	N	{}	主题色与节点样式配置，见注 2
left-content	Boolean	N	false	是否使用左侧自定义内容
left-content-style	Object	N	{}	左侧自定义内容样式
need-dark-mode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配
isRTL	Boolean	N	false	是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

Slots

名称	说明
leftContent	步骤条左侧自定义内容

注 1：list

字段	Type	Required	Default	Description
title	String	Y	-	标题
desc	String	N	-	描述
date	String	N	-	日期
highlight	Boolean	N	false	是否高亮当前项
leftContentDate	String	N	''	左侧默认内容中的日期文本

注 2：flow-config

字段	Type	Required	Default	Description
lineColor	String	N	#00A4F2	时间轴颜色
titleSize	String	N	28px	标题字号
highlightTitleColor	String	N	#00A4F2	高亮标题颜色
pointInnerColor	String	N	#00A4F2	普通时间节点颜色
highlightPointInnerColor	String	N	#00A4F2	高亮时间节点颜色

注意事项

可动态修改 dof-simple-flow 的 list 绑定数据，以更新流程及其状态。