示例

基础用法

支持水平和垂直两种布局。

PCPhonePad

HTMLJAVASCRIPTCSS

<page class="test-tabs-wrapper">
    <module title="水平布局">
        <steps
            layout="horizontal"
            data="{{list}}"
        />
    </module>
    <module title="垂直布局">
        <steps
            layout="vertical"
            data="{{list}}"
            bind-item-click="handleItemClick"
        />
    </module>
</page>

export default XPage({
    data: {
        list: [{
            title: '步骤 1步骤 1步骤 1步骤 1',
            status: 'done'
        }, {
            title: '步骤 2步骤 2步骤 2步骤 2',
            description: '这里是描述这里是描述这里是描述这里是描述这里是描述这里是<br/>我这里已经换行的描述了我这里已经换行的描述了我这里已经换行的描述了我这里已经换行的描述了',
            status: 'done'
        }, {
            title: '步骤 3步骤',
            description: '这描述这里是',
            status: 'process',
            icon: 'el-icon-sunrise'
        }, {
            title: '步骤 3步骤 3步骤 3步骤 3',
            description: '这里是描述这里是描述这里是描述',
            status: 'failed'
        }, {
            title: '步骤 1步骤 1步骤 1步骤 1',
            status: 'wait'
        }]
    },

    handleItemClick(item) {
        console.info('item-click', item);
    },
});

Attributes

属性	说明	类型	可选值	默认值	端	版本
layout	形态	String	horizontal/vertical	horizontal	PC/Mobile	--
data	步骤条数据	Array[{title, description, status, icon, disabled}]	--	--	PC/Mobile	--
alignCenter	居中对齐（仅支持horizontal布局，以及步骤和文案较少的情况）	Boolean	--	false	Mobile	--

Attributes - data

属性	说明	类型	可选值	默认值	端	版本
title	标题	String	--	--	PC/Mobile	--
status	状态	String	done/wait/process/failed	--	PC/Mobile	--
icon	图标	String	element-icons	--	PC/Mobile	--
description	描述	String/Html	--	--	PC	--
disabled	禁用，会在设置了item-click时取消鼠标悬浮手势的样式	Boolean	--	--	PC/Mobile	--

Event

名称	说明	回调参数	端	版本
item-click	点击步骤条项后触发	(item:具体值参考data传入的配置)	PC/Mobile	--