流程图 (bui-flow)

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

用法

  1. <bui-flow
    2.     :items="testData"></bui-flow>
    3. <bui-flow
    4.     :items="testData"
    5.     :customStyles="customStyles"
    6.     @click='_click'></bui-flow>


  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

属性

Prop Type Required Default Description
items array Y 流程图数据项
customStyles object N 自定义属性
items: 赋值单选组数据列表，传一个数组，单个数组的属性如下：
* title ：节点文本
* date ：节点时间
* desc ：节点描述
* highlight ：表明该选项是否为节点高亮, true为流程图节点高亮、false为流程图节点不高亮、默认值为false

customStyles: 自定义属性，传一个对象，属性如下： * lineColor ：线条色 * pointInnerColor ：正常节点背景色 * pointBorderColor ：正常节点边框色 * highlightTitleColor ：高亮状态文字色 * highlightPointInnerColor ：高亮状态节点背景色 * highlightPointBorderColor ：高亮状态节点边框色

事件

  • @click:点击某项触发的事件，返回索引