vue Element admin (步骤条样式)

最新推荐文章于 2024-05-16 16:23:48 发布

坚持与努力的成果

最新推荐文章于 2024-05-16 16:23:48 发布

阅读量417

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_58856770/article/details/125422182

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

<template>
    <div class="app-container">
        <el-steps :active="active" finish-status="success">
            <el-step title="页面一"></el-step>
            <el-step title="页面二"></el-step>
            <el-step title="页面三"></el-step>
        </el-steps>
        <div v-if="active == 0">
            <h1>页面一</h1>
            <el-button style="margin-top: 12px;margin-left: 20%" type="primary" @click="next">下一步</el-button>
        </div>
        <div v-if="active == 1">

            <h1>页面二</h1>
            <el-button style="margin-top:12px;" type="primary" @click="prev">上一步</el-button>
            <el-button style="margin-top: 12px;" type="primary" @click="next">下一步</el-button>
        </div>
        <div v-if="active == 2">

            <h1>页面三</h1>
            <el-button style="margin-top:12px;" type="primary" @click="prev">上一步</el-button>
            <el-button style="margin-top: 12px;" type="primary" @click="submit()">提交</el-button>
        </div>
    </div>
</template>


<script>export default {
    data() {
        return {
            active: 0,//步骤条初始化
        };
    },
    methods: {
        next() {
            //下一页
            if (this.active++ > 2) this.active = 0;
        },
        prev() {
            //上一页
            if (this.active > 0) this.active--;
        },
        submit() {
            // 跳转 path里写入跳转的页面
            this.$router.push({ path: '/shop/shopClassify' });
        }
    }
}
</script>