vue实战开发017:一个简单的进度条模拟安全检测

    今天做一个简单的检测进度条模拟，我们在很多平台都可以看到安全进度检测的进度条，实际是对我们的安全设置进行检查，当我们将对应的信息补全之后，就相当于完成了一项任务，其安全系数就会提升，这里我先整个最简单的进度条，下面是演示结果。

首先我们来定义HTML，这里我们主要有进度条背景，进度条，分值和检测按钮，这个前台比较简单，当然也可以哪来用，这样的话后台要操作的就比较多了，计算和检测的活都交给了后台，我们只需要把后台传回来的数据显示在这里即可。

<div class="pragressContainer">
    <div class="pragressbar">
        <div class="pragress" :style="{width:progress+'%'}">
            <b>{{progress}}%</b>
        </div>
    </div>
    <span>{{result}}</span>
    <button @click="check">重新检测</button>
</div>

接下来写CSS样式，这里我们还是喜欢使用响应式来布局我的设计，所以我用到了媒体查询功能，下面是CSS样式设置，pragressContainer控制整个进度条的样式，pragressbar则是进度条背景设置，pragress是进度条进度控制，这里绑定了一个动态的样式，来改变我们的进度。

.pragressContainer{
    width:60%;
    display: flex;
    margin:0 auto;
    padding:20px 0;
    display: flex;
    align-items: center;
}
.pragressbar{
    height: 20px;
    flex: 1;
    border-radius: 10px;
    background-color: rgb(216, 210, 210);
    position: relative;
}
.pragress{
    background-color: #1C8DE0;
    border-radius: 10px;
    height:20px;
    line-height: 20px;
}
.pragress b{
    color:#fff;
    font-weight: 100;
    font-size: 12px;
    position:absolute;
    left:50%; 
}
.pragressContainer span{
    font-weight: 600;
    font-size:24px;
    padding:0 20px;
    color:rgb(10, 151, 41);
}
.pragressContainer button{
    padding:10px;
    border:none;
    background-color: #a5a20b;
    color:#fff;
}
@media screen and (max-width: 1024px){
    .info_center .info_safe .pragressContainer{
        width:100%;
    }
}

这里我模拟一个点击事件，来改变progress的值，这样进度条就会随着progress的增长，来改变style的width值实现进度改变的视觉，这里我定义一个num=0，然后写个定时器，让其自增，到了100就停止，再把num重置为0就可以反复检测了。

这个progress 值是检测的进度显示，如果想直接用的话就要通过后台来实时的传递这个值了，而检测结果result也需要通过后台处理完之后检测信息之后返回对应的结果，这样就把大部分压力抛给了后端了，这个比较简单，后面来慢慢完善。

这里用到了display: flex;这是W3C提出了一种新的布局方案,可以简便、完整、响应式地实现各种页面布局，我给进度条设定了flex: 1;它会自动的获取剩余空间宽度，这样我们在改变网页宽度时就可以自动调整宽度了，align-items: center;设定垂直居中显示。