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

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

相关推荐
晴天162 分钟前
前端跨域方案解析:JSONP 的原理、实战与演进
前端·状态模式
web打印社区4 分钟前
浏览器静默打印?先别装第三个库了
前端·vue.js·chrome·electron·pdf
艾伦野鸽ggg6 分钟前
前端异步请求的状态竞争(请求竞态)问题
前端·javascript·axios
是立不是利10 分钟前
前端交互基石:深入剖析JavaScript三级联动背后的设计哲学
开发语言·前端·javascript
动恰客流统计16 分钟前
传统红外对射客流统计为何逐步淡出主流?准确率与场景限制深度分析
大数据·前端·人工智能
老刘的望远镜19 分钟前
AgentScope Java 从零(03):Agent 的记性默认全开,我在第 50 轮翻了车
java·开发语言·javascript
Rooting++27 分钟前
小程序{{ }}和vue{{ }}语法的区别
前端·vue.js·小程序
前端精髓1 小时前
React 更新 state 中的对象
javascript·react.js·ecmascript
豆约翰1 小时前
css自制图书封面效果
前端·css
积硅步致千里1 小时前
Fyne 兼容性:报错还能救,透明窗才要命
前端·后端