当前位置: 首页 > 文档资料 > Weex UI 中文文档 >

wxc-simple-flow

优质
小牛编辑
126浏览
2023-12-01

Weex 简易流程图组件,允许配置主题色

Demo

使用方法

<template>
  <wxc-simple-flow :list="testData" :themeColor="themeColor"></wxc-simple-flow>
</template>
<script>
  import { WxcSimpleFlow } from 'weex-ui';
  export default {
    components: { WxcSimpleFlow },
    data: () => ({
      themeColor: {
        lineColor: '#bf280b',
        pointInnerColor: '#b95048',
        pointBorderColor: '#bf280b',
        highlightTitleColor: '#bf280b',
        highlightPointInnerColor: '#bf280b',
        highlightPointBorderColor: '#d46262'
      },
      testData: [
        {
          'date': '2017-05-24 21:10:29',
          'desc': '',
          'highlight': true,
          'title': '方案已确认'
        },
        {
          'date': '2017-05-24 19:54:28',
          'desc': '',
          'title': '方案已更新'
        },
        {
          'date': '2017-05-24 19:50:21',
          'desc': '您以确定了方案',
          'title': '方案已上传'
        },
        {
          'date': '2017-05-24 19:49:03',
          'desc': '商家会在2个工作小时内电话或旺旺联系您',
          'title': '商家已接单'
        }
      ]
    })
  }
</script>

更详细代码可以参考 demo

可配置参数

PropTypeRequiredDefaultDescription
listArrayY-流程图数据
list[{title}]StringY-标题
list[{desc}]StringN-描述
list[{date}]StringN-日期
list[{highlight}]BooleanNfalse是否高亮
themeColorObjectN{}主题色配置
themeColor{lineColor}StringN-时间轴颜色
themeColor{pointInnerColor}StringN-时间节点内部颜色
themeColor{pointBorderColor}StringN-时间节点边框颜色
themeColor{highlightTitleColor}StringN-高亮标题颜色
themeColor{highlightPointInnerColor}StringN-高亮时间节点内部颜色
themeColor{highlightPointBorderColor}StringN-高亮时间节点边框颜色