美文网首页
vue 动态控制进度条

vue 动态控制进度条

作者: undefined汪少 | 来源:发表于2018-12-12 14:32 被阅读0次

    <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 动态控制进度条

          本文链接:https://www.haomeiwen.com/subject/gyauhqtx.html