UWorkflow 工作流程

• 示例
  • 基本用法
  • 添加左侧标签
  • 复杂场景
• UWorkflow API
  • Props/Attrs
  • Slots
• UWorkflowItem API
  • Props/Attrs
  • Slots
• UWorkflowBranch API
  • Slots

用于展示工作流程的图。

示例

基本用法

使用<u-workflow>、<u-workflow-item>、<u-workflow-branch>三个组件组织图的基本结构。

其中<u-workflow-item>包含 Cloud UI 中<u-button>的所有属性，这意味着你可以使用href和to等属性很方便地添加链接。

<u-workflow>
    <u-workflow-item title="立项" tooltip="提示" status="done" href="https://vusion.github.io" target="_blank"></u-workflow-item>
    <u-workflow-item title="需求沟通" status="done" href="https://vusion.github.io" target="_blank">
        <div slot="tooltip">
            使用 Slot 的工具提示
        </div>
    </u-workflow-item>
    <u-workflow-item>
        <u-workflow-branch>
            <u-workflow-item title="机器上架" status="done"></u-workflow-item>
        </u-workflow-branch>
        <u-workflow-branch>
            <u-workflow-item title="网络打通" status="done"></u-workflow-item>
        </u-workflow-branch>
        <u-workflow-branch>
            <u-workflow-item title="服务版本适配" status="doing"></u-workflow-item>
        </u-workflow-branch>
    </u-workflow-item>
    <u-workflow-item title="交付验收" status="todo"></u-workflow-item>
</u-workflow>

添加左侧标签

在最外面一层的<u-workflow-item>上，添加label属性，可以显示左侧标签。

<u-workflow>
    <u-workflow-item label="步骤1" title="立项" tooltip="提示" status="done" href="https://vusion.github.io" target="_blank"></u-workflow-item>
    <u-workflow-item label="步骤2" title="需求沟通" status="done" href="https://vusion.github.io" target="_blank">
        <div slot="tooltip">
            使用 Slot 的工具提示
        </div>
    </u-workflow-item>
    <u-workflow-item label="步骤3">
        <u-workflow-branch>
            <u-workflow-item title="机器上架" status="done"></u-workflow-item>
        </u-workflow-branch>
        <u-workflow-branch>
            <u-workflow-item title="网络打通" status="done"></u-workflow-item>
        </u-workflow-branch>
        <u-workflow-branch>
            <u-workflow-item title="服务版本适配" status="doing"></u-workflow-item>
        </u-workflow-branch>
    </u-workflow-item>
    <u-workflow-item label="步骤4" title="交付验收" status="todo"></u-workflow-item>
</u-workflow>

复杂场景

下面是一个结构更加复杂的示例。

<u-workflow label-size="small">
    <u-workflow-item label="步骤1" title="立项" status="done"></u-workflow-item>
    <u-workflow-item label="步骤2" title="需求A" status="done"></u-workflow-item>
    <u-workflow-item label="步骤3" title="需求B" status="done"></u-workflow-item>
    <u-workflow-item label="步骤4">
        <u-workflow-branch>
            <u-workflow-item title="分支1-A" status="doing"></u-workflow-item>
            <u-workflow-item title="分支1-未完成" status="todo"></u-workflow-item>
        </u-workflow-branch>
        <u-workflow-branch>
            <u-workflow-item title="分支2" status="done"></u-workflow-item>
            <u-workflow-item title="分支2" status="doing"></u-workflow-item>
            <u-workflow-item title="分支2" status="todo"></u-workflow-item>
        </u-workflow-branch>
        <u-workflow-branch>
            <u-workflow-item title="分支3" status="done"></u-workflow-item>
            <u-workflow-item>
                <u-workflow-branch>
                    <u-workflow-item title="分支3-1" status="done"></u-workflow-item>
                    <u-workflow-item title="分支3-1" status="doing"></u-workflow-item>
                    <u-workflow-item title="分支3-1" status="todo"></u-workflow-item>
                </u-workflow-branch>
                <u-workflow-branch>
                    <u-workflow-item title="分支3-2" status="done"></u-workflow-item>
                    <u-workflow-item title="分支3-2" status="doing"></u-workflow-item>
                </u-workflow-branch>
            </u-workflow-item>
            <u-workflow-item title="分支3-3" status="todo"></u-workflow-item>
        </u-workflow-branch>
    </u-workflow-item>
    <u-workflow-item title="交付验收"></u-workflow-item>
</u-workflow>

UWorkflow API

Props/Attrs

| Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | legend | Array<{ label: string, color: string }> | | '...' | 图例。图例项中的样式与图节点的一致 | | label-size | enum | 'small', 'normal', 'large' | 'normal' | 左侧标签的宽度 |

Slots

(default)

插入 <u-workflow-item>。

UWorkflowItem API

Props/Attrs

| Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | title | string | | | 步骤标题 | | label | string | | | 左侧标签 | | href | string | | | 链接地址 | | target | string | | | （原生属性）。比如设置_blank，会打开新的空白页。 | | to | string, Location | | | 需要 vue-router，与<router-link>的to属性相同。可以是一个字符串或者是描述目标位置的对象。 | | replace | boolean | | false | 需要 vue-router，与<router-link>的replace属性相同。如果为true，当点击时，会调用router.replace()而不是router.push()，于是导航后不会留下history 记录。 | | append | boolean | | false | 需要 vue-router，与<router-link>的append属性相同。如果为true，则在当前路径后追加to的路径。 |

Slots

(default)

插入 <u-workflow-branch>。

tooltip

自定义工具提示。

UWorkflowBranch API

Slots

(default)

插入 <u-workflow-item>。