基于Element的请求接口进度条

<template>
  <div>
    <el-progress :percentage="percentage" color="#409eff"  class="jdt_nr" v-show="jdt"></el-progress>
    <el-button type="primary"
               icon="el-icon-download"
               @click="abc()">开始请求</el-button>
  </div>
</template>
<script>
export default {
    data() {
        return {
            jdt:false,//进度条隐藏
            percentage: 0, //进度条值
            timeStart:''进度条计时
        };
    },
    methods: {
        abc(param){
            this.jdt=true
            this.loadingtuo = this.$loading({
                lock: true,
                text: "请稍等....",
                target: document.querySelector(".drts") // 设置加载动画区域
            });
            let that=this
            axios({
                url:"https://api.coindesk.com/v1/bpi/currentprice.json",
                method:'get',
            }).then(function (res) {
                that.percentage = 100;
                that.jdt=false;
                that.loadingtuo.close();

            }).catch(function (error) {
                console.log(error);
            });
        },
        increase() {
            var that=this;
            that.timeStart = setInterval(() => {
                if (that.percentage < 95) {
                    that.percentage += 5;
                }
                if (that.percentage > 100) {
                    that.percentage = 100;
                }
            }, 300);
        },
        increaseend(){
            var that=this;
            that.percentage = 100;
            clearInterval(this.timeStart);
        }

    },
    watch: {
        // 监听loading状态控制进度条显示
        jdt(value, newValue) {
            const that = this;
            console.log(value+"----newValue----"+newValue)
            if (value) {
                that.increase();
            } else {
                that.increaseend();
            }
        },
    },

};
</script>
<style>
  .jdt_nr{width:50%;margin:0 auto;z-index:10001;top:50%;margin-top:-31px;text-align:center;position:absolute;margin-left:25%}
  .sbxxdrjzdh .el-loading-spinner .circular{display: none;}
</style>