vue setInterval()控制进度条前进的时间

三155

于 2022-07-05 15:51:19 发布

阅读量556

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Beloved_Jodie/article/details/125621566

版权

进度条

      <el-button @click="init">进度</el-button>
      <el-button @click="delteInit">清空</el-button>
      <el-progress :text-inside="true" :stroke-width="22" :percentage="data" status="warning"></el-progress>

<script>
export default {
  data () {
    return {
      data: 0,
      time: null
    }
  },
  methods: {
    init () {
      let i = 1
      this.time = setInterval(() => {
        i++
        if (i >= 100) {
          clearInterval(this.time)
        }
        console.log(i)
        this.data = i
      }, 500)
    },
    delteInit () {
      this.data = 0
    }
  }
}
</script>