欺骗加载进度条,应用于无法监听接口数据传输进度的情况

html 复制代码
<template>
  <div :class="$options.name">
    <el-button type="primary" @click="fakeLoading">开始加载</el-button>

    <el-progress
      style="width: 100%; height: 30px"
      v-if="percentage"
      type="line"
      :percentage="percentage"
      :show-text="true"
      :stroke-width="5"
      :text-inside="false"
      :color="'#409EFF'"
      :define-back-color="'#eee'"
    />
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      interval: null,
      percentage: 0,
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    fakeLoading({ cb } = {}) {
      this.closeFakeLoading();
      this.interval = setInterval(() => {
        if (this.percentage >= 99) {
          clearInterval(this.interval);
          cb && cb();
        } else this.percentage += 1;
      }, 100);
    },
    closeFakeLoading(d) {
      clearInterval(this.interval);
      this.percentage = 0;
    },
  },
};
</script>

模仿滴滴单车解锁的时候,从0%到90%的欺骗加载动画效果https://blog.csdn.net/qq_37860634/article/details/100147738

相关推荐
user205855615181317 分钟前
Windows 项目安装时报 `node-sass` 错误,如何快速处理
前端
LiaCode18 分钟前
Redis 在生产项目的使用
前端·后端
LiaCode23 分钟前
一天学完 redis 的爽翻版核心知识总结
前端·后端
大刚测试开发实战24 分钟前
如何内网穿透访问本地私有化部署的TestHub
前端·后端·github
风骏时光牛马36 分钟前
# Ruby基于Rails框架实现多角色权限管理与数据分页查询完整实战代码案例
前端
米丘38 分钟前
微前端之 Web Components 完全指南
微服务·html
weedsfly38 分钟前
迭代器、生成器与异步迭代——让数据“按需流动”的艺术
前端·javascript
xiaodaoluanzha43 分钟前
迄今為止,最簡單的編程語言 Nolang
前端·后端
Csvn44 分钟前
Fetch 请求竞态终结者:AbortController 不只是用来"取消"的
前端
阡陌Jony1 小时前
关于前端路由中的参数问题的学习(一): params,query, hash(#)
前端