代码演示

基本形式

<jr-steps current=2 steps={steps} />
var component = new JRUI.Component({
    template: template,
    data: {
        steps: [{
            status: 0,
            title: '编辑',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }, {
            status: 1,
            title: '保存',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }, {
            status: 2,
            title: '提交',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }, {
            status: 3,
            title: '审核',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }]
    }
});

迷你版

在表单中使用

<jr-steps size="sm" current=2 steps={steps} />
var component = new JRUI.Component({
    template: template,
    data: {
        steps: [{
            status: 0,
            title: '编辑',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }, {
            status: 1,
            title: '保存',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }, {
            status: 2,
            title: '提交',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }, {
            status: 3,
            title: '审核',
            description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
        }]
    }
});

API

Classes

JRSteps

Constants

Component

JRSteps 步骤条

Functions

config()

JRSteps

Kind: global class
Extend: Component

new JRSteps()

Param Type Default Description
[options.data] object = 绑定属性
[options.data.steps] object <=> 类似于jr-select的source
[options.data.current] string null <=> 当前状态
[options.data.size] boolean false => 当前尺寸

Component

JRSteps 步骤条

Kind: global constant

Author: ziane(zianecui@gmail.com)

config()

Kind: global function
Access: protected

← 菜单栏 选项卡 →