《前端》vue-element UI 步骤条--2020年9月20日--待完善

最新推荐文章于 2024-05-09 17:59:20 发布

原创最新推荐文章于 2024-05-09 17:59:20 发布 · 554 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端同时被 2 个专栏收录

257 篇文章

订阅专栏

VUE.JS

62 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element UI实现自定义步骤条的样式，并通过点击按钮控制显示相应步骤的内容。参考了CSDN博主Fxhani的文章，详细讲解了实现过程。

1、通过点击下一步按钮：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue element 步骤条</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 element 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- jQuery文件 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 引入 element 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<style>
    .createorder_top {
        background-color: #fff;
        padding: 0 18px;
        width: 100%;
        height: 71px;
        line-height: 71px;
        display: flex;
        justify-content: space-between;
    }
    
    .createorder_top .createorder_top_left .createorder_left_set {
        font-size: 18px;
        color: #304156;
    }
    
    .createorder_top .createorder_top_left .activeSet {
        color: #409EFF;
    }
    
    .createorder_top .createorder_top_left .createorder_left_setdivision {
        display: inline-block;
        background-color: #99A9BF;
        width: 2px;
        height: 14px;
        margin: 0 46px;
    }
</style>

<body>
    <div id='app'>
        <!-- 顶部步骤条 -->
        <div class="createorder_top">
            <div class="createorder_top_left">
                <span class="createorder_left_set" :class="activeNum == 0 ||activeNum ==1||activeNum ==2?'activeSet':''" @click="next">1.上传销售合同</span>
                <span class="createorder_left_setdivision"></span>
                <span class="createorder_left_set" :class="activeNum ==1||activeNum ==2?'activeSet':''" @click="next">2.编辑信息</span>
                <span class="createorder_left_setdivision"></span>
                <span class="createorder_left_set" :class="activeNum ==2?'activeSet':''" @click="next">3.指标要求</span>
            </div>

        </div>
        <!-- 步骤条所对应的内容 -->
        <div class="createorder_bott">
            <div class="createorder_bott_one" v-if="activeNum==0">1</div>
            <div class="createorder_bott_one" v-if="activeNum==1">2</div>
            <div class="createorder_bott_one" v-if="activeNum==2">3</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    activeNum: 0,
                }
            },
            created() {
                this.activeNum = 0
            },
            methods: {
                next() {
                    if (this.activeNum++ >= 2) {
                        this.activeNum = 0;
                    }
                },
            }
        })
    </script>
</body>

</html>

学自：vue 自定义步骤条样式_Fxhani的博客-CSDN博客 https://blog.csdn.net/Fxhani/article/details/106387578

2、点击哪一个进度，就显示哪一个进度对应下的内容：