开发手册 - 流程图(bui-flow)

流程图 (bui-flow)

用法

<bui-flow
    :items="testData"></bui-flow>
<bui-flow
    :items="testData"
    :customStyles="customStyles"
    @click='_click'></bui-flow>

data: function () {
    return {
        testData: [
            {
                'date': '2017-05-24 21:10:29',
                'desc': '结束',
                'highlight': true,
                'title': '页面交互输出'
            },
            {
                'date': '2017-05-24 21:10:29',
                'desc': '回流到客户确认',
                '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': '业务员根据客户的需要制定产品解决方案',
                'title': '客户提出需求方案'
            }
        ],
        customStyles: {
            'highlightTitleColor': '#EE9900',
            'highlightPointInnerColor': '#EE9900',
            'highlightPointBorderColor': '#FFE78D'
        },
    }
},
methods: {
    _click(index){
        this.$toast(index);
    },
}

Example:bui-flow

属性

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

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

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

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

事件

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