Vue学习笔记：Vue中封装自定义步骤条 实现上下一步

Vue中封装自定义步骤条 实现上下一步

效果图：

如上图：在VUE中实现效果，VUE+Element,ant都有封装好的UI,直接引用就好了；

这里，觉得样式不符合UI设计，所以自定义封装了一个步骤条组件；

设计原理：当点击下一步的，获取步骤的index, 通过绑定的class 给经过的步骤添加样式；

:class="index <= stepsIndex ? 'on' : ''"

定义步骤条的条数,数组定义在父组件，通过this.$parent 获取父组件的数组；

步骤条组件中只封装了步骤条的样式和dom,数据和方法均在父组件定义；

stepsData:[
      {name:'第一步'},
      {name:'第二步'},
      {name:'第三步'},
      {name:'第四步'}
]

循环渲染出步骤条

<div class="steps-box">
        <div
                v-for="(item, index) in stepsData"
                class="steps-card"
                :class="index <= stepsIndex ? 'on' : ''"
                :key="index">
            <span>{{ index + 1 }}</span>
            <span>{{ item.name }}</span>
        </div>
    </div>

以上是封装步骤条组件的代码；

如下是父组件引用步骤条组件和上下一步的方法！

 import steps from "../components/steps.vue";
    components:{
            steps
    }

引用

<!--步骤条-->
        <steps ref="stepsChild"></steps>

父组件定义的上下一步方法

 //下一步
            prevSteps(){
                this.stepsIndex --
                this.$refs.stepsChild.stepsFun()
            },
            nextSteps(){
                this.stepsIndex ++
               this.$refs.stepsChild.stepsFun()
            }

===========================================================================

完整代码

步骤条组件

<template>
    <div class="steps-box">
        <div
                v-for="(item, index) in stepsData"
                class="steps-card"
                :class="index <= stepsIndex ? 'on' : ''"
                :key="index">
            <span>{{ index + 1 }}</span>
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "steps",
        data: function () {
            return {
                stepsIndex: "",
                stepsData: [],
            };
        },
        created() {
            this.stepsIndex = this.$parent.stepsIndex;
            this.stepsData = this.$parent.stepsData;
        },
        methods: {
            //下一步
            stepsFun() {
                this.stepsIndex = this.$parent.stepsIndex;
            },
        },
    };
</script>

<style lang="scss" scoped>
    /*    steps-box*/
    .steps-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        margin-top: 200px;
        .steps-card {
            width: 300px;
            cursor: pointer;
            display: flex;
            align-items: center;
            color: rgba(0, 0, 0, 0.25);
            position: relative;
            span:nth-of-type(1) {
                display: inline-block;
                width: 26px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 50%;
                margin-right: 10px;

                i {
                    font-style: normal;
                }
            }
        }
        .steps-card:before {
            width: 194px;
            height: 1px;
            content: "";
            background: #e9e9e9;
            margin: 0 15px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
        }
        .steps-card:last-of-type {
            width: auto;
        }
        .steps-card:last-of-type:before {
            width: 0;
        }
        .steps-card.on {
            display: flex;
            align-items: center;
            color: rgba(0, 0, 0, 0.85);

            span:nth-of-type(1) {
                display: inline-block;
                width: 26px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                background: #1d73f6;
                border: 1px solid #1d73f6;
                color: #fff;
                border-radius: 50%;
                margin-right: 10px;
            }
        }
        .steps-card.on:before {
            background: #1d73f6;
        }
    }
</style>

父组件

<template>
    <div class="addTask">
        <!--步骤条-->
        <steps ref="stepsChild"></steps>
        <!--内容区域-->
        <div class="task-main-box">
            <div v-if="stepsIndex == 0" class="task-con-box"><h1>第一步</h1></div>
            <div v-if="stepsIndex == 1" class="task-con-box"><h1>第二步</h1></div>
            <div v-if="stepsIndex == 2" class="task-con-box"><h1>第三步</h1></div>
            <div v-if="stepsIndex == 3" class="task-con-box"><h1>第四步</h1></div>


        </div>
        <!--操作按钮-->
        <div class="button-box">
            <div v-if="stepsIndex == 0">取消</div>
            <div v-if="stepsIndex == 3">完成</div>
            <div @click="prevSteps" v-if="stepsIndex != 0">上一步</div>
            <div @click="nextSteps" v-if="stepsIndex != 3">下一步</div>
        </div>
    </div>
</template>

<script>
    import steps from "../components/steps.vue";

    export default {
        name: "addTask",
        data() {
            return {
                //新建任务
                stepsIndex:0,
                stepsData:[
                    {name:'第一步'},
                    {name:'第二步'},
                    {name:'第三步'},
                    {name:'第四步'}
                ]
            };
        },
        methods: {
            //返回数据采集页面
            goback() {
                this.$parent.addTask = false;
            },
            //下一步
            prevSteps(){
                this.stepsIndex --
                this.$refs.stepsChild.stepsFun()
            },
            nextSteps(){
                this.stepsIndex ++
               this.$refs.stepsChild.stepsFun()
            }
        },
        components:{
            steps
        }
    };
</script>

<style lang="scss" scoped>
.addTask{
    width: 100%;
    height: 100%;
    overflow: hidden;
    .task-main-box{
        width: 100%;
        height:calc(100% - 45vh);
        .task-con-box{
            width: 100%;
            height:100%;

        }
    }
    .button-box{
        display: flex;
        justify-content: center;
        div{
            padding: 10px;
            background: #2F86FF;
            margin: 10px;
            border-radius:4px;
            cursor:pointer;
            color:#ffffff;
        }
    }

}



</style>

END!

Vue笔记：以上方法仅供参考！感谢阅读，欢迎点赞！