步骤 KLSteps

基本形式

<kl-steps current={current} steps={steps} />
<kl-button title="下一步" on-click={current = (current + 1) % steps.length}></kl-button>

var component = new NEKUI.Component({
    template: template,
    data: {
        current: 0,
        steps: [{
            status: 0,
            title: '提交订单',
            description: '2017-08-18 提交提交成功',
        }, {
            status: 1,
            title: '付款成功',
            description: '订单付款完成，商品将会送出',
        }, {
            status: 2,
            title: '等待收货',
            description: '订单正在配送中，请准备签收',
        }, {
            status: 3,
            title: '完成',
            description: '订单完成，感谢使用考拉海购',
        }]
    }
});

迷你版

在表单中使用

<kl-steps size="sm" current={current} steps={steps} />
<kl-button title="下一步" on-click={current = (current + 1) % steps.length}></kl-button>

var component = new NEKUI.Component({
    template: template,
    data: {
        current: 2,
        steps: [{
            status: 0,
            title: '提交订单',
            description: '2017-08-18 提交提交成功',
        }, {
            status: 1,
            title: '付款成功',
            description: '订单付款完成，商品将会送出',
        }, {
            status: 2,
            title: '等待收货',
            description: '订单正在配送中，请准备签收',
        }, {
            status: 3,
            title: '完成',
            description: '订单完成，感谢使用考拉海购',
        }]
    }
});

API

KLSteps

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.steps]	`Array.<object>`		<=> 数据源
[options.data.steps[].status]	`number`		=> 状态id，支持方法，传入当前 current 返回 true 则属于当前状态
[options.data.steps[].title]	`string`		=> 步骤标题
[options.data.steps[].description]	`Array.<object>`		=> 步骤具体描述
[options.data.current]	`number`	`0`	<=> 当前状态
[options.data.size]	`string`		=> 当前尺寸，sm