流程图 (bui-flow | bui-timeline)

  • bui-flow固定布局

流程图 (bui-flow | bui-timeline) - 图1   流程图 (bui-flow | bui-timeline) - 图2

  • bui-timeline可扩展布局

流程图 (bui-flow | bui-timeline) - 图3   流程图 (bui-flow | bui-timeline) - 图4

用法

  1. <bui-flow
  2.     :items="testData"></bui-flow>
  3. <bui-flow
  4.     :items="testData"
  5.     :customStyles="customStyles"
  6.     @click='_click'></bui-flow>
  8. <bui-timeline>
  9.     <bui-timeline-item first=true></bui-timeline-item>
  10.     <bui-timeline-item>
  11.         <text class="time">1984年</text>
  12.         <text class="content">发布 Macintosh</text>
  13.     </bui-timeline-item>
  14.     <bui-timeline-item>
  15.         <text class="time">2007年</text>
  16.         <text class="content">发布 iPhone</text>
  17.     </bui-timeline-item>
  18.     <bui-timeline-item>
  19.         <text class="time">2010年</text>
  20.         <text class="content">发布 iPad</text>
  21.     </bui-timeline-item>
  22.     <bui-timeline-item last=true>
  23.         <text class="time">2011年10月5日</text>
  24.         <text class="content">史蒂夫·乔布斯去世</text>
  25.     </bui-timeline-item>
  26. </bui-timeline>
  1. data: function () {
  2.     return {
  3.         testData: [
  4.             {
  5.                 'date': '2017-05-24 21:10:29',
  6.                 'desc': '结束',
  7.                 'highlight': true,
  8.                 'title': '页面交互输出'
  9.             },
  10.             {
  11.                 'date': '2017-05-24 21:10:29',
  12.                 'desc': '回流到客户确认',
  13.                 'title': '设计稿上传'
  14.             },
  15.             {
  16.                 'date': '2017-05-24 19:54:28',
  17.                 'desc': '产品经理需跟业务与设计相关人员确认',
  18.                 'title': '产品经理确认'
  19.             },
  20.             {
  21.                 'date': '2017-05-24 19:50:21',
  22.                 'desc': '以需求方案输出产品原型,需要客户确认',
  23.                 'title': '产品原型图'
  24.             },
  25.             {
  26.                 'date': '2017-05-24 19:49:03',
  27.                 'desc': '业务员根据客户的需要制定产品解决方案',
  28.                 'title': '客户提出需求方案'
  29.             }
  30.         ],
  31.         customStyles: {
  32.             'highlightTitleColor': '#EE9900',
  33.             'highlightPointInnerColor': '#EE9900',
  34.             'highlightPointBorderColor': '#FFE78D'
  35.         },
  36.     }
  37. },
  38. methods: {
  39.     _click(index){
  40.         this.$toast(index);
  41.     },
  42. }

Example:bui-flow

属性

  • bui-flow
Prop Type Required Default Description
items array Y 流程图数据项
customStyles object N 自定义属性
  • bui-timeline
Prop Type Required Default Description
color string N blue 圆圈颜色，可选值为blue``red``green，或自定义色值
title string N 发布版本一 默认时间轴文本
last boolean Y false 指定最后一个节点
first boolean Y false 指定第一个节点

items: 赋值单选组数据列表，传一个数组，单个数组的属性如下：

  • title ：节点文本
  • date ：节点时间
  • desc ：节点描述
  • highlight ：表明该选项是否为节点高亮, true为流程图节点高亮、false为流程图节点不高亮、默认值为false

customStyles: 自定义属性，传一个对象，属性如下：

  • lineColor ：线条色
  • pointInnerColor ：正常节点背景色
  • pointBorderColor ：正常节点边框色
  • highlightTitleColor ：高亮状态文字色
  • highlightPointInnerColor ：高亮状态节点背景色
  • highlightPointBorderColor ：高亮状态节点边框色

事件

  • @click:点击某项触发的事件，返回索引。bui-flow特有

bui-timeline的扩展

自定义时间轴点内容，参考如下：

  1. <bui-timeline title="">
  2.     <bui-icon name="trophy" slot="dot"></bui-icon>
  3.     <text class="time">1984年</text>
  4.     <text class="content">发布 Macintosh</text>
  5. </bui-header>