vue 动态控制进度条

Posted 2023-04-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 动态控制进度条相关的知识，希望对你有一定的参考价值。

参考技术A <template>

<div>

<el-progress :percentage="nuw" color="#8e71c7"></el-progress>

<button @click="click"> 下一步 </button>

</div>

</template>

data()

return

nuw:0,

,

methods:

click()

//定义定时器开始时间为0

var progressnuw =0;

//顶一个定时器

var timer=setInterval(()=>

//变量一直++

progressnuw++

//清楚定时器

if(progressnuw>=100)

clearInterval(timer);

//获取重新赋值

this.nuw=progressnuw

,30)

,

Vue 进度条和图片的动态更改

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="vue.css">
 7     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 8 </head>
 9 <body>
10     <div id="vue-app">
11         <!--图片-->
12         <div id="bag"  v-bind:class="{burst:ended}"></div>
13 
14 
15         <!-- 进度情况 --->
16         <div id="bag-health">
17             <div v-bind:style="{width:health+‘%‘}"></div>
18 
19             <!--<div style="width: 60%;"></div>-->
20         </div>
21 
22         <!--控制按钮-->
23         <div id="">
24             <button v-on:click="punch" v-show="!ended">用力敲</button>
25             <button v-on:click="restart">重新开始</button>
26         </div>
27     </div>
28 
29     <script src="app.js"></script>
30 </body>
31 </html>

HTML

 1 new Vue({
 2     el:‘#vue-app‘,
 3     data:{
 4         health:0,
 5         ended:false
 6     },
 7     methods:{
 8         punch:function(){
 9             
10             this.health+=10;
11             if(this.health >= 100){
12                 this.ended=true;
13             }
14         },
15         restart:function(){
16 
17             this.health=0;
18             this.ended=false;
19         }
20     },
21     computed:{
22 
23     }
24 })

Vue.js

#bag{
    width:200px;
    height: 500px;
    margin: 0 auto;
    background:url(bag.png) center no-repeat;
    background-size:80%;
    background-color:orange;
}
#bag.burst{
    background:url("") center no-repeat;
}
#bag-health{
    width: 200px;
    border:2px #000 solid;
    margin 0 auto 20px auto;
}

#bag-health div{
    height:20px;
    background:crimson;
}

#controls{
    width:120px;
    margin:0 auto;
}

CSS

以上是关于vue 动态控制进度条的主要内容，如果未能解决你的问题，请参考以下文章

vuevideo进度条样式乱

vue多文件上传进度条进度不更新问题

VUE项目实现音乐播放器------- 设计播放进度条 + 播放控制按钮

vue进度条插件都有哪些？

VUE----页面加载进度条

uview表单填了几条进度条

vue 动态控制进度条

Vue 进度条 和 图片的动态更改

Vue 进度条和图片的动态更改