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)
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
orientation | string | horizontal | flow 方向,可选['horizontal', 'vertical'] | -- |
flow-state
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
title | string | 标题 | -- | |
state | string number | 在节点中显示的内容 | -- | |
is-done | boolean | false | 该节点是否完成 | -- |
插槽
名字 | 说明 | 版本要求 |
title | 标题插槽,默认内容为 prop:title | v2.7.0 |
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
tip | string | 流线的提示文字,当 is-done 为 true 时无效 | -- | |
tip-direction | string | top for horizontal flow, left for vertical flow | 提示文字方向,可选['top', 'right', 'bottom', 'left']. 在横向 flow 中默认为 top,纵向默认则为 left | -- |
is-done | boolean | false | 该流线是否完成 | -- |
line-span | number string | 流线的整体长度,如果不设置,所有 flow line 将平分 | -- | |
process-span | number string | 50 | 在 flow line 上显示的进度比例 | -- |