ElementUi中步骤条el-steps的使用

最新推荐文章于 2024-06-01 16:59:12 发布

七七Cqq

最新推荐文章于 2024-06-01 16:59:12 发布

阅读量1.9k

点赞数 3

分类专栏：功能代码文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67869050/article/details/129064856

版权

功能代码专栏收录该内容

17 篇文章 1 订阅

订阅专栏

项目展示

在这里插入图片描述

        <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
            <el-step title="1.开通基础信息"></el-step>
            <el-step title="2.开通内容"></el-step>
            <el-step title="3.开通产品信息"></el-step>
            <el-step title="4.生成订单信息"></el-step>
        </el-steps>
        <div v-show="active == 1"></div>
        <div v-show="active == 2"></div>
        <div v-show="active == 3"></div>
        <div v-show="active == 4"></div>
		<div class="btns">
                <el-button size="mini" @click="closeDialog" v-if="active == 1">取消</el-button>
                <el-button v-if="active == 2 || 3" type="primary" @click="pre" size="mini">上一步</el-button>
                <el-button v-if="active < 3" type="primary" @click="next" size="mini">下一步</el-button>
                <el-button v-if="active == 3" type="primary" v-loading.fullscreen.lock="fullscreenLoading":element-loading-text="loadText" @click="confirmOpen" size="mini">确认开通</el-button>
        </div>

     data() {
       active: 1
     }
     methods: {
        next() {
        	if (this.active++ > 3) this.active = 1
        },
        pre() {
            if (this.active-- < 2) this.active = 1
        },
     	
     }