首页 前端知识 vue2 使用组件 实现步骤条

vue2 使用组件 实现步骤条

2024-10-27 22:10:40 前端知识 前端哥 893 932 我要收藏

效果图
单击按钮逐次进行下一步
在这里插入图片描述

代码

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

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>步骤条</title>
    <script src='./js/vue.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        #app {
            position: relative;
            width: 880px;
            height: 400px;
            padding: 100px;
            margin: 100px auto;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            box-sizing: border-box;
        }
        #app button {
            width: 100px;
            height: 40px;
            border-radius: 10px;
            position: absolute;
            bottom: 150px;
            left: 50px;
            border: 2px solid #5f5f5f;
            background-color: #fff;
            font-size: 20px;
            font-weight: 9000;
        }
        #app button:hover {
            border-color:#478fd5;
            color:#478fd5;

        }

        .el_step {
            width: 640px;
        }

        .el_step ul {
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .el_step ul li {
            display: flex;
        }

        .el_step ul li span {
            width: 300px;
            height: 0px;
            border: 2px solid #c0c4cc;
            margin-top: 19px;
            margin-left: 0px;
        }



        .el_step ul li>div p:nth-of-type(1) {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 2px solid #c0c4cc;
            border-radius: 50%;
            box-sizing: border-box;
            line-height: 40px;
            text-align: center;
            color: #c0c4cc;
            font-weight: 900;
        }

        .el_step ul li>div p:nth-of-type(2) {
            font-size: 14px;
            margin-top: 10px;
            font-weight: 900;
            color: #c0c4cc;
        }

        /* 步骤到达 样式 */
        .el_step ul .on span {
            border-color: #67c23a;
            transition: all .3s;
        }

        .el_step ul .on #div {
            color: #67c23a;
            transition: all .3s;
        }

        .el_step ul .on #div p:nth-of-type(1) {
            border-color: #67c23a;
            color: #67c23a;
            transition: all .3s;
        }

        .el_step ul .on #div p:nth-of-type(2) {
            color: #67c23a;
            transition: all .3s;
        }
        /* 步骤到达 样式 */


        /* 步骤预到达 样式 */
        .el_step ul .in #div {
            color: #000;
        }

        .el_step ul .in #div p:nth-of-type(1) {
            border-color: #000;
            color: #000;
        }

        .el_step ul .in #div p:nth-of-type(2) {
            color: #000;
        }
        /* 步骤预到达 样式 */

    </style>
</head>

<body>
    <div id='app'>
        <el_step :list="list" :active="active"></el_step>
        <button @click="add()">下一步</button>
    </div>


    <!--  组件 template模板 -->
    <template id="el-step">
        <div class="el_step">
            <ul>
                <li v-for="(item,index) in list" :key="index"
                    :class="item.id <= active ? 'on' : item.id == active+1 ? 'in' : ''">
                    <!-- 线 v-show显示2条 -->
                    <span v-show="item.id >=2"></span>
                    <div id="div">
                        <p v-text="item.id <= active ? '✔' : item.id"></p>
                        <p> {{ item.name }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </template>

</body>

<script>
    Vue.config.productionTip = false;  //阻止 vue 在启动时生成生产提示,
    // 内
    let el_step = {
        template: "#el-step",
        props: {
            list: {
                typeof: Array,
                default: () => {
                    return []
                }
            },
            active: {
                typeof: Number,
                default: 0
            }
        },

    };
    // 创建Vue实例
    var vm = new Vue({
        // 绑定dom
        el: '#app',
        // 数据
        data() {
            return {
                active: 0,
                list: [
                    {
                        id: 1,
                        name: "步骤1",
                    },
                    {
                        id: 2,
                        name: "步骤2",
                    },
                    {
                        id: 3,
                        name: "步骤3",
                    },
                ]
            }
        },
        // 注册组件
        components: {
            // 步骤1 ~ 3
            el_step
        },
        // 事件方法
        methods: {
            add() {
                if (this.active >= 3) {
                    this.active = 0
                } else {
                    this.active++
                }
            }
        }
    })
</script>

</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19232.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!