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

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

相关推荐
渣渣盟5 小时前
Spark 性能调优实战:从开发到生产落地
javascript·ajax·spark
大前端helloworld5 小时前
AI全自动实现Flutter蓝牙自动连接
前端
GISer_Jing5 小时前
从入门到落地:前端开发者的AI Agent全栈学习路线
前端·人工智能·ai编程
计算机安禾5 小时前
【Linux从入门到精通】第47篇:SystemTap与eBPF——Linux内核观测的显微镜
java·linux·前端
技术钱6 小时前
OutputParser输出解析器
linux·服务器·前端·python
专科3年的修炼6 小时前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
可达鸭小栈7 小时前
易语言实现CSS像素文字生成器:无需字体文件渲染汉字
前端·css
fox_lht7 小时前
DBeaver的LightGrid 类所有函数详细分析
前端
钛态7 小时前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web
光影少年7 小时前
前端在页面渲染优化和组件优化经验?
前端·vue.js·react.js·前端框架