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

Flow 组件使用教程

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

安装

import { Flow, FlowState, FlowLine } from 'vux'

export default {
  components: {
    Flow,
    FlowState,
    FlowLine
  }
}
// 在入口文件全局引入

import Vue from 'vue'
import { Flow, FlowState, FlowLine } from 'vux'

Vue.component('flow', Flow)
Vue.component('flow-state', FlowState)
Vue.component('flow-line', FlowLine)

属性

名字类型默认值说明版本要求
orientationstringhorizontalflow 方向,可选['horizontal', 'vertical']--

flow-state

属性

名字类型默认值说明版本要求
titlestring标题--
statestring
number
在节点中显示的内容--
is-donebooleanfalse该节点是否完成--

插槽

名字说明版本要求
title标题插槽,默认内容为 prop:titlev2.7.0

属性

名字类型默认值说明版本要求
tipstring流线的提示文字,当 is-done 为 true 时无效--
tip-directionstringtop for horizontal flow, left for vertical flow提示文字方向,可选['top', 'right', 'bottom', 'left']. 在横向 flow 中默认为 top,纵向默认则为 left--
is-donebooleanfalse该流线是否完成--
line-spannumber
string
流线的整体长度,如果不设置,所有 flow line 将平分--
process-spannumber
string
50在 flow line 上显示的进度比例--