element Steps 含状态步骤条及单步执行事件处理

1. 处理单个步骤的事件，可以单独执行某一个步骤。

2. 点击播放按钮，按顺序执行全部步骤。

效果

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

每一步骤显示出该步骤的状态。

 

 

 

 

扫描二维码关注公众号，回复： 14508320 查看本文章

HTML 代码

<p>element-ui 步骤条演示</p>
        <div id='theSteps' class="row">
        
            <div class="col-2">
                <el-button @click='handleClick' type="primary" icon="el-icon-caret-right" circle></el-button>
            </div>
            <!-- https://element.eleme.cn/#/zh-CN/component/steps -->
            <div class="col-4">
                <el-steps id='steps' class="col-4" :active='active' space='20%'>
                    <el-step id='step1' title="开始" @click.native="handle1('030')"></el-step>
                    <el-step id='step2' title="执行" @click.native="handle2('060')"></el-step>
                    <el-step id='step3' title="核验" @click.native="handle3('090')"></el-step>
                    <el-step id='step4' title="结束" @click.native="handle4('120')"></el-step>
                </el-steps>
            </div>
        </div>

JS 代码 

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                active: 0
            }
        },
        methods: {
            handle1(flag) {
                console.log(flag)
                this.active = 1
            },
            handle2(flag) {
                console.log(flag)
                this.active = 2
            },
            handle3(flag) {
                console.log(flag)
                this.active = 3
            },

            handle4(flag) {
                console.log(flag)
                this.active = 4
            },

            handleClick() {
                // 手动播放
                if (this.active++ > 3) this.active = 0;

                if (this.active == 1) {
                    document.getElementById("step1").click();
                }
                if (this.active == 2) {
                    document.getElementById("step2").click();
                }
                if (this.active == 3) {
                    document.getElementById("step3").click();
                }
                if (this.active == 4) {
                    document.getElementById("step4").click();
                }

            }
        }
    })
</script>

官方链接参考

https://element.eleme.cn/#/zh-CN/component/steps