6.10 横向流程（Step Flow H）

横向流程组件

• 可设置主题色，如高亮，字体颜色等

实例

基础用法

<template>
    <div class="wrapper">
        <dof-minibar
            title="dof-step-flow-h"
            background-color="#267AFF"
            text-color="#ffffff"
            :left-button="leftButton"
            @dofMinibarLeftButtonClicked="back"
        ></dof-minibar>
        <scroller class="scroller-wrapper">
            <title title="dof-step-flow-h"></title>
            <category class="category" title="默认样式"></category>
            <div class="flow-wrapper">
                <dof-step-flow-h :list="list"></dof-step-flow-h>
            </div>
            <category class="category"  title="固定宽度" @click.native="updateActive(listA)"></category>
            <div class="flow-wrapper">
                <div class="flow-inner-wrapper">
                    <dof-step-flow-h :list="listA" :styles-config="stylesConfigA"></dof-step-flow-h>
                </div>
            </div>
            <category class="category"  title="自定义样式1" @click.native="updateActive(listB)"></category>
            <div class="flow-wrapper-1">
                <div class="flow-inner-wrapper-1">
                    <dof-step-flow-h :list="listB" :styles-config="stylesConfigB"></dof-step-flow-h>
                </div>
            </div>
            <category class="category"  title="自定义样式2" @click.native="updateActive(listC)"></category>
            <div class="flow-wrapper">
                <div class="flow-inner-wrapper">
                    <dof-step-flow-h :list="listC" :styles-config="stylesConfigC"></dof-step-flow-h>
                </div>
            </div>
        </scroller>
    </div>
</template>
<style scoped>
.wrapper {
    flex: 1;
}

.category{
    margin: 10px auto;
}
.scroller-wrapper {
    padding-bottom: 50px;
}
.flow-wrapper {
    width: 750px;
    padding: 32px;
}
.flow-inner-wrapper {
    background-color: #f9f9f9;
    border-radius: 16px;
    border-radius: 16px;
    padding: 32px;
}
.flow-wrapper-1 {
    width: 750px;
    padding: 32px;
    justify-content: center;
    align-items: center;
    background-color: #0568fe;
}
.flow-inner-wrapper-1 {
    width: 436px;
    border-radius: 16px;
    border-radius: 16px;
    padding: 32px;
}
</style>

<script>  
import { setTitle } from 'src/_mods/set-nav'
import Title from 'src/_mods/title.vue'
import Category from 'src/_mods/catalog'
import { DofStepFlowH, DofMinibar } from 'dolphin-intl-ui';

export default {
    components: { DofStepFlowH, DofMinibar, Title, Category},
    // mixins: [base],
    data() {
        return {
            leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
            list: [
                { desc: "洗涤" },
                { desc: "漂洗" },
                { desc: "脱水" },
                { desc: "烘干" }
            ],

            listA: [
                { desc: "洗涤", isActived: true },
                { desc: "漂洗" },
                { desc: "脱水" },
                { desc: "烘干" }
            ],
            stylesConfigA: {
                activedColor: '#00de51',
                columnStyles: {
                    "width": (750 - 64 - 64) / 4
                },
                lineStyles: {
                    "opacity": 0.2,
                    "border-top-color": "blue"
                },
            },

            listB: [
                // { desc: "洗涤" },
                // { desc: "漂洗" },
                // { desc: "脱水", isActived: true },
                // { desc: "烘干" }
                ],
            stylesConfigB: {
                activedColor: '#FFFFFF',
                lineStyles: {
                    "opacity": 0.2
                },
                pointStyles: {
                    "opacity": 0.2,
                    "background-color": '#FFFFFF'
                },
                descStyles: {
                    "opacity": 0.6,
                    "color": '#FFFFFF'
                },
            },

            listC: [
                { desc: "洗涤" },
                { desc: "漂洗" },
                { desc: "脱水" },
                { desc: "烘干", isActived: true }
            ],
            stylesConfigC: {
                activedColor: '#00de51',
                lineStyles: {
                    "opacity": 0.2,
                    "border-top-style": "dashed",
                    "border-top-color": "blue"
                }
            }
        }
    },
    methods: {
        updateActive(list) {
            console.log("updateactive")
            let nextIndex = 0
            list.forEach((item, index, arr) => {
                if (item.isActived) {
                    nextIndex = (index + 1) % arr.length
                    this.$set(list, index, { ...list[index], ...{ isActived: false } })
                }
            })
            this.$set(list, nextIndex, { ...list[nextIndex], ...{ isActived: true } })
        }
    },
    mounted() {
        setTimeout(() => {
            this.listB = [
                { desc: "洗涤" },
                { desc: "漂洗" },
                { desc: "脱水", isActived: true },
                { desc: "烘干" }
            ]
        }, 1000);
    },
    created() {
    }
};
</script>

Attributes

Prop	Type	Required	Default	Description
list	Array	N	[]	流程项数据，见注 1
styles-config	Object	N	{}	全局样式配置，见注 2
show-line	Boolean	N	false	将连接线加粗显示，见“注意事项”
isRTL	Boolean	N	false	是否启用 RTL（从右到左）布局；默认关闭 ^2.5.6
need-dark-mode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配
point-color	String	N	''	步骤节点颜色
line-color	String	N	''	步骤连接线颜色
text-color	String	N	''	文字颜色

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

stylesConfig 和单项样式可覆盖待执行默认色；activedColor 保留激活态语义，pointColor、lineColor、textColor 可显式覆盖激活色。

注1: list

Prop	Type	Required	Default	Description
desc	String	N	-	节点描述文本
is-actived	Boolean	N	false	是否高亮当前项
column-styles	Object	N	{}	当前项容器样式，可覆盖全局 columnStyles
point-styles	Object	N	{}	当前项圆点样式，可覆盖全局 pointStyles
line-styles	Object	N	{}	当前项后连接线样式，可覆盖全局 lineStyles
desc-styles	Object	N	{}	当前项文本样式，可覆盖全局 descStyles

注2: stylesConfig

Prop	Type	Required	Default	Description
activedColor	String	N	#00de51	高亮节点、已完成连接线及当前文本颜色
lineStyles	Object	N	{}	连接线样式
pointStyles	Object	N	{}	节点圆点样式
descStyles	Object	N	{}	节点描述文本样式
columnStyles	Object	N	{}	每个流程项的容器样式
rowStyles	Object	N	{}	整个流程行的样式

注意事项

当个别机型或系统版本中连接线显示异常时，可将 show-line 设为 true，使连接线从 2px 加粗至 4px，例如 :show-line="true"。