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

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

相关推荐
zhensherlock2 小时前
Protocol Launcher 系列:Mail Assistant 轻松发送 HTML 邮件
前端·javascript·typescript·node.js·html·github·js
恒本银河+2 小时前
基于MQTT+NFC标签项目开发教程
前端·javascript·nfc标签
GISer_Jing2 小时前
React 18+ 高级特性实战与面试精讲
javascript·react.js·面试
吴声子夜歌2 小时前
ES6——异步操作和async函数详解
前端·ecmascript·es6
小小小米粒2 小时前
生命周期 = Vue 实例从创建 → 挂载 → 更新 → 销毁的全过程钩子函数computed = 基于依赖缓存的计算属性
前端·javascript·vue.js
IT_陈寒2 小时前
Vue的响应式更新把我坑惨了,原来是这个问题
前端·人工智能·后端
gyx_这个杀手不太冷静2 小时前
大人工智能时代下前端界面全新开发模式的思考(一)
前端·人工智能·ai编程
冰暮流星2 小时前
javascript之dom访问css
开发语言·javascript·css
Java小卷3 小时前
FormKit源码二开 - 校验功能扩展
前端·低代码