比较优秀的同事的杰作，拿来膜拜一下下！
简略图
就是一个进度管理的工具，能随时看到进度，这样的描述怪怪的，用到的时候自然懂的。
image.png
引入vue,js头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.min.js"></script>
style的样式部分。
<style>
body{
margin: 0;
padding: 0;
}
#view{
width: 850px;
height: 200px;
margin: 50px auto;
position: relative;
}
.bg{
position: absolute;
width: 800px;
height: 20px;
background-color: #ccc;
margin: 25px;
}
.bg>div{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -25px;
margin-left: -25px;
background-color: #ccc;
text-align: center;
line-height: 50px
}
.box{
width: 50px;
height: 70px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.box .view{
position: absolute;
width: 800px;
height: 20px;
background-color: #4bb985;
margin: 25px;
}
.box .view>div{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -25px;
margin-left: -25px;
background-color: #4bb985;
text-align: center;
line-height: 50px
}
.btns{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.btns p{
padding-left: 20px;
}
.btns input{
width: 120px;
height: 26px;
outline: none;
margin-right: 25px;
margin-left: 10px;
padding-left: 10px;
}
.btns button{
width: 80px;
height: 30px;
margin: 0 10px;
background-color: #009688;
border: none;
color: #fff;
outline: none;
text-align: center;
line-height: 30px;
cursor: pointer;
}
</style>
body部分的布局内容
<body>
<div id="view">
<div class="bg">
<div v-for="(x,index) in total" :style="{left:index*(800/(total-1))+'px'}">{{x}}</div>
</div>
<div class="box" :style="{width:((num-1)*2+1)/((total-1)*2)*800+25+'px',transition: 'all '+time+'s'}">
<div class="view">
<div v-for="(x,index) in total" :style="{left:index*(800/(total-1))+'px'}">{{x}}</div>
</div>
</div>
<div class="btns">
<p>
<span>节点总数:</span><input type="text" v-model="tempT" @keyup.enter="changeT">
<span>完成节点数：</span><input type="text" v-model="tempN" @keyup.enter="changeN">
<span>按enter确认输入</span>
</p>
<p>
<button @click="go(0)">上一步</button>
<button @click="go(1)">下一步</button>
</p>
</div>
</div>
</body>
js部分的数据流绑定
<script>
var view = new Vue({
el:"#view",
data:{
total:3,
num:1,
tempT:3,
tempN:1,
time:1
},
methods:{
go:function(flag){
this.time = 1;
var count = this.num;
flag==1?count++:count--;
if(count>this.total){
alert("已经到最后一步了！")
}else if(count<1){
alert("已经是第一步了!")
}else{
this.num = count;
this.tempN = count;
}
},
changeT:function(){
this.time = 0;
var total = Number(this.tempT);
if(typeof total =="number"){
if(total<this.num||total<=1){
alert("请重新输入！")
}else{
this.total=total;
}
}else{
alert("请重新输入！")
}
},
changeN:function(){
this.time = 0;
var num = Number(this.tempN);
if(typeof num =="number"){
if(num>this.total||num<1){
alert("请重新输入！")
}else{
this.num=num;
}
}else{
alert("请重新输入！")
}
}
}
})
</script>
</html>
- 整理不易但是一想以后就不同带着U盘还要怕丢了宝贝就是一直写下去的决心！
网友评论