支付，配送....流程，模拟后台返回状态码 --飞机票项目

Hello，我们做项目的时候经常会遇到一些支付流程啊，配送流程啊。说白的就是一个’时间表’，虽然我这么说是‘时间表’，可能在术语上不对，我也不知道怎么解释了。
请看下图：我们要实现的效果图：

一看图，相信大家都明白了，项目中会遇到很多这种交互。
逻辑思路分析：
1.背景条跟随状态变化而变化。
2.文字内的背景色跟颜色跟随状态变化而变化

那么应该怎么去考虑写代码呢？ 首先我说过了我们是通过一个状态码来判断 我们的背景条到那里，还有我们数字内的背景色跟字体颜色。那么 我们可以反过来想想 后台是不是 传一个 值 等于 多少 我们写一个假如值：
num：1 填写信息状态
num：2 确认信息状态
num：3 支付状态
num：4 完成状态

因为我们没有后台，我们就写四个bntton 按钮 来模拟这四个值 的变化把！

<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        list-style: none;

    }
    #box{
        width: 1200px;
        height: 60px;
        border: 1px solid red;
        margin: 50px auto;
        padding: 20px  30px;
        position: relative;
        /*overflow: hidden;*/
    }
    li{
        float: left;
        padding: 0 105px;
        z-index: 99;
        width: 90px;
    }
    li>div{
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background: #999;
        text-align: center;
        line-height: 40px;
        margin: 0 auto;
        transition: all 1s;
    }
    p{
        text-align: center;
    }
    #bg{
        position: absolute;
        width: 95.24%;
        background: #999;
        height: 20px;
        z-index: -1;
        top: 30px;
    }
    .bgs{
        height: 100%;
        background: red;
        transition: all 0.5s;
    }
    #btn{
        position: absolute;
        bottom: -30px;
    }
    .active{
        background: blue;
        color: #fff;
    }
</style>
<div id="box">
    <ul>
        <li ref='list'>
            <div :class="{active:state.active1}">1</div>
            <p>填写信息</p>
        </li>
        <li>
            <div :class="{active:state.active2}">2</div>
            <p>确认信息</p>
        </li>
        <li>
            <div :class="{active:state.active3}">3</div>
            <p>支付</p>
        </li>
        <li>
            <div :class="{active:state.active4}">4</div>
            <p>完成</p>
        </li>
    </ul>
    <div id="bg">
        <div class="bgs" :style='activeObj'></div>
    </div>

    <div id='btn'>
        <button @click='add1'>填写信息</button>
        <button @click='add2'>确认信息</button>
        <button @click='add3'>支付</button>
        <button @click='add4'>完成</button>
    </div>
</div>

布局就不多说了直接看页面里面的几个属性：
1.首先 我给这四个li绑定了 同一个类 就是 active的类，选中的样式，然后通过vue让他们都为fasle；
2.其次 给背景条绑定了一个style 是一个对象，里面是背景条的宽 width
3.最后我给每一个按钮添加不同的点击事件
分析我们的JS代码：

<script type="text/javascript">
    var vm = new Vue({
        el:'#box',
        data:{
            activeObj:{
                width:0
            },
            state:{
                active1:false,
                active2:false,
                active3:false,
                active4:false,
                num:'',
                listWidth:''
            }

        },
        methods:{
            add1(){
                this.state.num = 1;
                // console.log(this.$refs.list.getBoundingClientRect().width)
                // console.log(this.state.active1)
            },
            add2(){
                this.state.num = 2
            },
            add3(){
                this.state.num = 3
            },
            add4(){
                this.state.num = 4
            }
        },
        watch:{
            state:{
                handler(newVale){
                    if (newVale.num == 1) {
                        this.activeObj.width = this.state.listWidth +'px';
                        this.state.active1 = true;
                        this.state.active2 = false;
                        this.state.active3 = false;
                        this.state.active4 = false;
                    }else if (newVale.num == 2 ) {
                        this.activeObj.width = this.state.listWidth * 2 +'px'
                        this.state.active1 = true;
                        this.state.active2 = true;
                        this.state.active3 = false
                        this.state.active4 = false
                    }else if( newVale.num == 3){
                        this.activeObj.width = this.state.listWidth * 3 +'px'
                        this.state.active1 = true;
                        this.state.active2 = true;
                        this.state.active3 = true
                        this.state.active4 = false
                    }else if(newVale.num == 4){
                        this.activeObj.width = this.state.listWidth * 4 +'px'
                        this.state.active1 = true;
                        this.state.active2 = true;
                        this.state.active3 = true
                        this.state.active4 = true
                    }
                },deep: true
            }
        },
        mounted(){
            this.state.listWidth =  this.$refs.list.getBoundingClientRect().width
            console.log(this.state.active1)
        }
    })
</script>

通过我们一开始的逻辑，我们说过要通过一个num值的返回的状态来改变我们想改变的样式！
所以我们就通过自定义 一个num值，然后点击按钮的时候改变 num值的变化。然后我们通过vue中的监听num值来改变样式！（注意一点：这里因为是对象类型所以监听要加 deep：true）。

我们要说一下，ref=‘list’ 大家可以上网查一下，在mounted里面的代码是 获取li元素的宽度的。

最后，我写的可能比较多，不够简单，因为能想到的都想到了，如果大家有更好的代码，跟思路可以给我在下方留言或者添加我好友 QQ992262716.

好了！我是杨小宝，感谢您的阅读！（持续更新飞机票项目所有知识点）